PDA

View Full Version : Help with multiple tab scripts......



Bryguth3
04-02-2011, 12:41 PM
1) Script Title: ddtabcontent()

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

3) Describe problem:
I am currently using the shade tab on a site and the content that I'm try to post has ten tabs. I found an old article in one of the forums that mentioned just doubling the code which I did but the links only work at one row at time either the top row or bottom row. Below is the page where lives with a working top row:
http://beantownfx.com/websites/ams/proj_manage.html

I found and implemented this help without much success:
http://www.dynamicdrive.com/forums/showthread.php?t=28800


Any help on the topic would be greatly appreciated.

ddadmin
04-03-2011, 08:09 AM
Please read that thread again- essentially, there should still just be one tabs container with a single ID attribute, but in this case, instead of that container being the UL element, change it to a DIV element that encompasses two UL elements. So instead of this for example:


<ul id="countrytabs" class="shadetabs" style="margin-left: 7px">
<li><a href="#" rel="country1">Peer Reviews</a></li>
<li><a href="#" rel="country2">Project Recovery</a></li>
<li><a href="#" rel="country3">Selecting Tools & Techniques</a></li>
<li><a href="#" rel="country4">Quick Starts</a></li>
<li><a href="#" rel="country5">Project Organization</a></li>
</ul>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Profiling</a></li>
<li><a href="#" rel="country2">Capital Projects</a></li>
<li><a href="#" rel="country3">Earned Value Management</a></li>
<li><a href="#" rel="country4">Risk Management</a></li>
<li><a href="#" rel="country5">Methodology Developement</a></li>
</ul>

You should have:


<div id="countrytabs">
<ul class="shadetabs" style="margin-left: 7px">
<li><a href="#" rel="country1">Peer Reviews</a></li>
<li><a href="#" rel="country2">Project Recovery</a></li>
<li><a href="#" rel="country3">Selecting Tools & Techniques</a></li>
<li><a href="#" rel="country4">Quick Starts</a></li>
<li><a href="#" rel="country5">Project Organization</a></li>
</ul>

<ul class="shadetabs">
<li><a href="#" rel="country1" class="selected">Profiling</a></li>
<li><a href="#" rel="country2">Capital Projects</a></li>
<li><a href="#" rel="country3">Earned Value Management</a></li>
<li><a href="#" rel="country4">Risk Management</a></li>
<li><a href="#" rel="country5">Methodology Developement</a></li>
</ul>
</div>

Bryguth3
04-03-2011, 04:12 PM
Thanks that worked and for the quick response. I just had one more question about the script. If I were to add a second set of tabs to the page would I be correct to assume that all I need to do is copy the code, and give the tabs a different ID tag? Any and all information is greatly appreciated.

ddadmin
04-04-2011, 10:40 PM
Assuming your second set of tabs also contain multiple lines of tabs, you would duplicate the above code and give the outermost DIV a unique ID (ie: "citytabs" instead of "countrytabs").