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

[Feznizzle]

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/.../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!

[Feznizzle]

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

[mc12345678]

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?

[lat9]

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

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

[Feznizzle]

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?

[mc12345678]

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>

[Feznizzle]

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