Tab Content Script with Anchors! ;)

[Arci]

1) Script Title: Tab Content Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...tabcontent.htm

3) Describe problem: Enabling Achors support for Tab Content Script


This post is rather an improvement than a help request...

I've modified the JS in order to support anchors (link from a site to a specific tab). Only little modifications in the initializetabcontent() function needed.

function initializetabcontent(){
	// fetch the anchor
	var anchor = window.location.hash
	
	for (var i=0; i<arguments.length; i++){ //loop through passed UL ids
		if (enabletabpersistence==0 && getCookie(arguments[i])!="") //clean up cookie if persist=off
			setCookie(arguments[i], "")
		var clickedontab=getCookie(arguments[i]) //retrieve ID of last clicked on tab from cookie, if any
		var ulobj=document.getElementById(arguments[i])
		var ulist=ulobj.getElementsByTagName("li") //array containing the LI elements within UL
		for (var x=0; x<ulist.length; x++){ //loop through each LI element
			var ulistlink=ulist[x].getElementsByTagName("a")[0]
			if (ulistlink.getAttribute("rel")){
				savetabcontentids(arguments[i], ulistlink.getAttribute("rel")) //save id of each tab content as loop runs
				ulistlink.onclick=function(){
					expandcontent(this)
					return false
				}
				// if an anchor found, expand corresponding tab and content
				if(anchor != "") {
					var cmp = "#" + ulistlink.getAttribute("rel");
					if(anchor == cmp){
						expandcontent(ulistlink);
					}
				} else {
					if (ulist[x].className=="selected" && clickedontab=="") { //if a tab is set to be selected by default
						expandcontent(ulistlink) //auto load currenly selected tab content
					}
				}
			}
		} //end inner for loop
		if (anchor == "" && clickedontab!=""){ //if a tab has been previously clicked on per the cookie value
			var culistlink=getullistlinkbyId(arguments[i], clickedontab)
			if (typeof culistlink!="undefined"){ //if match found between tabcontent id and rel attribute value
				expandcontent(culistlink) //auto load currenly selected tab content
			} else { //else if no match found between tabcontent id and rel attribute value (cookie mis-association)
				expandcontent(ulist[0].getElementsByTagName("a")[0]) //just auto load first tab instead
			}
		}
	} //end outer for loop
}

Modifications are highlited in the code box above.

The anchors have to be the same as the rel attribute value of the <a> tag within your list. E.g. if your link looks sth. like <a href="#" rel="tab3">Tab Three</a> then you can link direktly to Tab three by http://www.yourdomain.com/yourfile.html#tab3

Perhaps the modification could make its way to the official Tab Content script

[webtrade]

I've tried implementing the code but the content won't open after landing on a page from a clicked link on another page. Content only opens after a tab is clicked on.

[webtrade]

Never mind, I found an easier solution. I got the script to always open the first tab when landing on a page by deleting these three lines at the bottom:

if (typeof culistlink!="undefined"){ //if match found between tabcontent id and rel attribute value
expandcontent(culistlink) //auto load currenly selected tab content
} else { //else if no match found between tabcontent id and rel attribute value (cookie mis-association)

Thanks