Tab Content Script default tab content

[Arci]

1) Script Title: Tab Content Script

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

3) Describe problem:

I have the problem that the default content is NOT expanded (first time the page is loaded) and cannot figure out why... The corresponding Tab IS highlighted but the content is not shown.

HTML code:


<ul id="maintab" class="shadetabs">
<li id="exp0a"><a href="#" rel="overview">Overview</a></li>
<li id="exp3p"><a href="#" rel="publications">Publications</a></li>
<li id="exp4p" class="selected"><a href="#" rel="events">Events</a></li>
<li id="exp5p"><a href="#" rel="recommendations">Recommendations</a></li>
<li id="exp2p"><a href="#" rel="companies">Companies</a></li>
</ul>
<div id="subline">&nbsp;</div>
<script type="text/javascript">
// Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab")
</script>


The different IDs are used to set custom background colors. The layer subline is used to display a "line" under the tabs with the same background color as the selected tab.



<div class="tabcontentstyle">
<div id="overview" class="tabcontent">
Overview content...
</div>
<div id="publications" class="tabcontent">
Tab publications content here
</div>
<div id="events" class="tabcontent">
Tab events content here
</div>
<div id="recommendations" class="tabcontent">
Tab recommendations content here
</div>
<div id="companies" class="tabcontent">
Tab companies content here...
</div>
</div>


Does anybody detect an error in above code?? Any suggestion is appreciated...

Thx in advance!

[ddadmin]

Everything looks right. Do you have an online example to the problem?

[Arci]

Everything looks right. Do you have an online example to the problem?

no, i dont have an online example yet... :(

look at the function expandcontent:


function expandcontent(linkobj){
var ulid = linkobj.parentNode.parentNode.id //id of UL element
var ullist = document.getElementById(ulid).getElementsByTagName("li") //get list of LIs corresponding to the tab contents
for(var i=0; i < ullist.length; i++){
ullist[i].className=""; //deselect all tabs
if (typeof tabcontentIDs[ulid][i] != "undefined") { //if tab content within this array index exists (exception: More tabs than there are tab contents)
alert('element id: ' + tabcontentIDs[ulid][i]);
document.getElementById(tabcontentIDs[ulid][i]).style.display="none"; //hide all tab contents
alert('still there after document.getElementById...');
}
}
alert('now highlighting...');
linkobj.parentNode.className="selected" //highlight currently clicked on tab
document.getElementById(linkobj.getAttribute("rel")).style.display="block" //expand corresponding tab content
document.getElementById("subline").className = linkobj.getAttribute("rel") // set class for subline layer
saveselectedtabcontentid(ulid, linkobj.getAttribute("rel"))
}

I added some alerts and figured out that the second alert you can see above fails! the loop is executed only once and the script seems to abort execution then...

any ideas? :confused:

sth must go wrong in the line:
document.getElementById(tabcontentIDs[ulid][i]).style.display="none"; //hide all tab contents

[Arci]

Just found the problem! :)



<script type="text/javascript">
// Start Tab Content script for UL with id="maintab" Separate multiple ids each with a comma.
initializetabcontent("maintab");
</script>

the script has to be placed AFTER the divs containing the tab contents. I placed the script similar to the example but moved the divs behind... my fault :mad:

Though thx a lot for your help ddadmin ;)