Can't trigger jscript tab from html anchor link

Hello!

I'm trying to do something that should be very simple, but I can't figure out and it's driving nuts!

I'm simply trying to call tab2 from a text link within tab1. Here is an example that does what I want. To see what I want to do, simply click on "open third tab":
http://jquerytools.github.io/demos/tabs/anchors.html

Here you can see the test page I've been playing my actual script:
http://justusedmedicalequipment.com/Used_Medical_Equipment/Experimenting

Click between the tabs and note the behavior. Then, while viewing the Product Description tab, click the link below the blue ribbon image ("Click Me").

I'm able to trigger the second tab, I just can't get it to show as current.

Here is my href from below the image:
<a href="javascript:void(0)" onclick="expandcontent('sc2', this)"><span>Click Me!</span></a>

What am I doing wrong?

Thanks!

You have replaced the anchor names in the example with "javascript:void(0)". In lines 447 & 448, 'this' in the JavaScript calls refer to the appropriate <li> elements inside the "slidetabsmenu", so it works. However in line 464, 'this' refers to the surrounding <td> element which isn't a tab. You need to follow the example page and name the tabs, then use the correct tab name in the JavaScript call in line 464.

A part from what styxlawyer observes in post #2, wouldn't it be better to use the following code instead of http://jquerytools.github.io/demos/tabs/anchors.html?

Code:

<!doctype html> <html > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hashchange</title> </head> <body> <a href="#panel1" >Load panel 1</a> <a href="#panel2" >Load panel 2</a> <a href="#panel3" >Load panel 3</a> <div id="tab_content" style="padding:10px; position: relative; border: 1px solid black; width: 500px; height: 300px; overflow: auto"></div> <script> function hash_change() { document.getElementById('tab_content').innerHTML=document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML } window.onhashchange=hash_change; if(window.location.hash=='')window.location.replace('#panel1') </script> <div style="position: absolute; display: none"> <div id="panel1"> <span style="color: white; background: red">This is panel 1</span><br> <a href="#panel1" >Load panel 1</a> <a href="#panel2" >Load panel 2</a> <a href="#panel3" >Load panel 3</a> </div> <div id="panel2"> <span style="color: red; background: #dedede">This is panel 2</span><br> <a href="#panel1" >Load panel 1</a> <a href="#panel2" >Load panel 2</a> <a href="#panel3" >Load panel 3</a> </div> <div id="panel3"> <span style="color: white; background: blue">This is panel 3</span><br> <a href="#panel1" >Load panel 1</a> <a href="#panel2" >Load panel 2</a> <a href="#panel3" >Load panel 3</a> </div> </div> <script> document.getElementById('tab_content').innerHTML=document.getElementById(location.hash.substring(1,location.hash.length)).innerHTML </script> </body> </html>

It allows you to bookmark the different panels.

Thanks for the input!

Styxlawyer, I think you're on the right track. I just can't figure out the correct way to do that. I just tried this:
<a href="javascript:void(0)" onclick="expandcontent('sc2', document.getElementById('sc2'))"><span>mc12345678</span></a>

Sorry, molendijk, I now realize that the jquerytools link was missleading. That was just a working example of what I'm trying to do. The actual JS I'm using is an "off-the-shelf" script... cuz I'm way too dumb to figure out how to write my own script! :)

Here is my actual script:

Code:

/*********************************************** * DD Tab Menu II script- � Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ //Set tab to intially be selected when page loads: //[which tab (1=first tab), ID of tab content to display]: var initialtab=[1, "sc1"] //Turn menu into single level image tabs (completely hides 2nd level)? var turntosingle=0 //0 for no (default), 1 for yes //Disable hyperlinks in 1st level tab images? var disabletablinks=0 //0 for no (default), 1 for yes ////////Stop editting//////////////// var previoustab="" if (turntosingle==1) document.write('<style type="text/css">\n#tabcontentcontainer{display: none;}\n</style>') function expandcontent(cid, aobject){ if (disabletablinks==1) aobject.onclick=new Function("return false") if (document.getElementById && turntosingle==0){ highlighttab(aobject) if (previoustab!="") document.getElementById(previoustab).style.display="none" document.getElementById(cid).style.display="block" previoustab=cid } } function highlighttab(aobject){ if (typeof tabobjlinks=="undefined") collectddimagetabs() for (i=0; i<tabobjlinks.length; i++) tabobjlinks[i].className="" if (aobject != null) { aobject.className="current" } } function collectddimagetabs(){ var tabobj=document.getElementById("slidetabsmenu") tabobjlinks=tabobj.getElementsByTagName("a") } function do_onload(){ if (document.getElementById("slidetabsmenu") != null) { collectddimagetabs() expandcontent(initialtab[1], tabobjlinks[initialtab[0]-1]) } //do_tabmagic() //ShowTabs() } function do_tabmagic() { //Hack for Attribs to be default checked var attribcontainer = document.getElementById('productAttributes_tab') if (attribcontainer != undefined) { var attritems = attribcontainer.getElementsByTagName("input"); } if (attritems != undefined) { for (var n = 0; n<attritems.length; n++){ if (attritems[n].getAttribute('checked') == "checked") { attritems[n].checked=true; } } } // Hide real versions and remove _tab suffix to replace real versions. var tabmain= document.getElementById('tabcontentcontainer') if (tabmain != undefined) { var tabContainer= tabmain.getElementsByTagName("*"); } var productDetails= document.getElementById('productDetailsList'); var productDetailstab= document.getElementById('productDetailsList_tab'); if (tabContainer != undefined) { var hackArr = new Array(); var NewArr = new Array(); hackArr[0] = document.getElementById('cartAdd'); hackArr[1] = document.getElementById('productDetailsList'); hackArr[2] = document.getElementById('productAttributes'); hackArr[3] = document.getElementById('productQuantityDiscounts'); hackArr[4] = document.getElementById('productAdditionalImages'); hackArr[5] = document.getElementById('alsoPurchased'); hackArr[6] = document.getElementById('crossSell'); hackArr[7] = document.getElementById('reviewsDefault'); hackArr[8] = document.getElementById('productDescription'); hackArr[9] = document.getElementById('attribsOptionsText'); hackArr[10] = document.getElementById('productMainImage'); hackArr[11] = document.getElementById('productName'); hackArr[12] = document.getElementById('productPrices'); hackArr[13] = document.getElementById('freeShippingIcon'); NewArr[0] = document.getElementById('cartAdd_tab'); NewArr[1] = document.getElementById('productDetailsList_tab'); NewArr[2] = document.getElementById('productAttributes_tab'); NewArr[3] = document.getElementById('productQuantityDiscounts_tab'); NewArr[4] = document.getElementById('productAdditionalImages_tab'); NewArr[5] = document.getElementById('alsoPurchased_tab'); NewArr[6] = document.getElementById('crossSell_tab'); NewArr[7] = document.getElementById('reviewsDefault_tab'); NewArr[8] = document.getElementById('productDescription_tab'); NewArr[9] = document.getElementById('attribsOptionsText_tab'); NewArr[10] = document.getElementById('productMainImage_tab'); NewArr[11] = document.getElementById('productName_tab'); NewArr[12] = document.getElementById('productPrices_tab'); NewArr[13] = document.getElementById('freeShippingIcon_tab'); for (var j = 0; j<hackArr.length; j++){ if (hackArr[j] != undefined) { for (var i = 0; i<tabContainer.length; i++){ sTmp = tabContainer[i].id.split("_"); if(hackArr[j].id == sTmp[0]) { ////alert(sTmp[0] + '(' + j + ') = ' + hackArr[j].id + '(' + j + ')'); ////alert(hackArr[j].innerHTML); hackArr[j].style.display="none"; hackArr[j].innerHTML=''; hackArr[j].outerHTML=''; break; } } } } if (hackArr[8] != undefined) { hackArr[8].style.display="none"; } for (var j = 0; j<NewArr.length; j++){ if (NewArr[j] != undefined) { for (var i = 0; i<tabContainer.length; i++){ if(tabContainer[i].id == NewArr[j].id) { sTmp = NewArr[j].id.split("_"); NewArr[j].id=sTmp[0]; break; } } } } } } function ShowTabs() { var tppblock = document.getElementById('tpptabBlock') if (tppblock != undefined) { tppblock.style.display = 'block'; } } if (window.addEventListener) window.addEventListener("load", do_onload, false) else if (window.attachEvent) window.attachEvent("onload", do_onload) else if (document.getElementById) window.onload=do_onload

Solution found. This call does the trick:

Code:

<a href="javascript:void(0)" onclick="expandcontent('sc2', document.getElementById('slidetabsmenu').getElementsByTagName('a')[1])"><span>Click Me!</span></a>