Need a javascript expert! Can't trigger css class using href...

Hello,

I'm using Tabbed Product Pro and I'm trying to trigger Tab2 from a link within the text beneath Tab1.

To show you what I want to do, here is an easy example (click click on "open third tab"):
http://jquerytools.github.io/demos/tabs/anchors.html

Now here is a page with a live version of my script:
http://justusedmedicalequipment.com/Used_Medical_Equipment/Experimenting

Click the tabs to check behavior. Then, while viewing Product Description tab, click on "Click Me!".

I can trigger the Quality Assurance tab, only I can't figure out how to show it as "current".

Here is the html I'm using at the moment:
<a href="javascript:void(0)" onclick="expandcontent('sc2', this)"><span>Click Me!</span></a>

What am I doing wrong?

Thanks!

Here is the JS:

/***********************************************
* 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

When I visited the page and selected the show me button, the second tab was immediately presented.

Possibly a cache issue from your local browser or did something else get changed?

It looks, to me at least, that you got this sorted.

P.S. I didn't see a "Show me" button.

No, it's not cache. Same results on multiple browsers.

Here is an image to help illustrate:

.

.

Drawing your attention to the # "1"... when you click on the Quality Assurance tab:
It displays Quality Assurance content AND highlights the tab in blue <--- which is normal and what I want!

Drawing your attention to the # "2"... when you click on the Click Me! link:
It displays Quality Assurance content but FAILS to highlight the tab in blue

Hope that's a better description of the problem?

The second argument of the expand function should reference the object that is to be "highlighted". Currently that is your clickable link by association of "this".

Perhaps try changing it to:

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

Didn't work, but I feel like your on the right track!

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

Where 1 within the square bracket represents the second tab (of course could do 2 - 1) and a value of 0 would be for the first tab.

Explanation of the provided solution... The javascript code provided above, is typically expected to be executed upon clicking the hyperlink (redirecting to a javascript onclick action) and the javascript expects to "know" which link was clicked and then modify that link location a bit. The identifier is the "this" that is/was sent. So, from outside of that location, the same "object" must be identified to the script (although it does offer some control if the object is not passed into the function). The applicable 'a' tags in this code/site do not have any specific identifier associated like a class or an id, therefore referencing them becomes a little more "difficult". Ideally, they could be generated with a unique id like a-sc1 and a-sc2 indicating that each is an a tag for the applicable sc1 or sc2, and then the original suggestion ought to work when using 'a-sc2' in the function. An alternative to this which is the one provided above is to use the known div tag and go through each of the 'a' tags to the one that is "in question" and provide the remaining javascript the object information on which to operate. A little clumsier/less "reliable" as one could maybe manually insert an additional a tag or some other modification be made that makes correcting the above javascript more difficult and need more "manual" intervention.

Anyways, I write this at least explaining my avenue of attack, if I was wrong, perhaps another could provide the solution based off of my mistake. If not, then others might learn something. :)

~~~ AWESOME! ~~~

I think I love you bro!!!!!!

Thank you so much! This has been bugging me for a loooooooong time!

Feznizzle:

~~~ AWESOME! ~~~

I think I love you bro!!!!!!

Thank you so much! This has been bugging me for a loooooooong time!

Welcome, yeah just noticed that there had been another thread to address the code/plugin more directly related to the central issue. :) I haven't used it really, so wasn't something that piqued my interest or that I thought I would be able to address as easily as others that use the plugin more frequently.

Glad it got sorted!!! :)