Help with Tab Content script

**Steelergridiron** · 05-11-2012, 04:36 PM

1) Script Title: Tabbed Content v2

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

3) Describe problem: I had no problem installing the script on my page. I would like to add a second to the same page. Is there a setting that I need to change in oder to install a second script. This script is on http://www.steelergridiron.com

Thanks for any help that you can give me.

I am a novice so this may be a stupid question

**traq** · 05-11-2012, 05:30 PM

Originally Posted by dynamicdrive.com/dynamicindex17/tabcontent.htm

Give the main container of your tab links a unique ID

A second script won't work if you just "cut and paste" it because it needs a unique id. It can be anything you want, as long as it doesn't appear anywhere else. Then, you will be able to initiate a second instance of the script using that id.

**Steelergridiron** · 05-11-2012, 06:05 PM

I am sorry, I am just a dumb ass. Below is the script as I have it now.
Could you change all of the instances od "ID" that need changed. I changed "countrytabs" and all of the <li><ul id's> and the <div id's> and it still didn't work. What am I missing

<div align="center">
<table border="0" width="460">
<tr><td><ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1">Post-Gazette</a></li>
<li><a href="#" rel="country2">Steelers.Com</a></li>
<li><a href="#" rel="country3">TribLive</a></li>
<li><a href="#" rel="country4">NFL News</a></li>
<li><a href="#" rel="country5">Videos</a></li>
<li><a href="#" rel="country6">AFC North</a></li>
</ul>
<div style="border:1px solid gray; width:460px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
<b>
<script type="text/javascript" src="http://output14.rssinclude.com/output?type=js&id=106748&hash=a72dd2931d9a6c906d8fb973ff382c5c"></script><br />
</b>
</div>
<div id="country2" class="tabcontent">
<b>
<script type="text/javascript" src="http://output23.rssinclude.com/output?type=js&id=110186&hash=e369b410536fb8be7b1bba49302aade9"></script> </b>
</div>
<div id="country3" class="tabcontent">
<b><script type="text/javascript" src="http://output80.rssinclude.com/output?type=js&id=124815&hash=c6886da06d943c186213a94a670bc657"></script>

</b>
</div>
<div id="country4" class="tabcontent">
<b>
<script type="text/javascript" src="http://output38.rssinclude.com/output?type=js&id=145991&hash=d9c02ff72ae0f0a9f22bdcfb2c3d63fb"></script>

</b>
</div>
<div id="country5" class="auto-style14"><script type="text/javascript" src="http://output75.rssinclude.com/output?type=js&id=327698&hash=8f4cf72c540da62a34f054b87b2a9d7a"></script>

</div>
<div id="country6" class="auto-style14"><b><script type="text/javascript" src="http://output39.rssinclude.com/output?type=js&id=141670&hash=4b2248805e0818f32c4a30965764e456"></script><script type="text/javascript" src="http://output53.rssinclude.com/output?type=js&id=141674&hash=9710beb03fd07a98f2a67b05805ee506"></script><script type="text/javascript" src="http://output62.rssinclude.com/output?type=js&id=141676&hash=8c570c43c03747945dea3be9851878eb"></script>
</b>
</div>
</div>
<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
</td></tr></table>

**traq** · 05-11-2012, 10:41 PM

don't be too hard on yourself.

this

HTML Code:

<ul id="countrytabs" class="shadetabs">

is where you need to choose a new id. After that, add a second instance of the ddtabcontent script (assuming you used "newtabs" as your new id):

Code:

var newtabs=new ddtabcontent("newtabs");
newtabs.setpersist(true);
newtabs.setselectedClassTarget("link");
newtabs.init();

You would also need to change the ids (and matching rel attributes) on each tab link/ tab content:

HTML Code:

<li><a href="#" rel="newtabs1">Post-Gazette</a></li>
<!-- matches -->
<div id="newtabs1" class="tabcontent">...your content goes here...</div>
<!-- and so forth. -->

just be patient with it, once you understand what needs to be done, it's pretty easy.

Once you change and double-check everything, if it's still not working, post your code* (or a link to your page) and we'll look at it again.

*

Please use the forum's bbcode tags and indent your code to make it more readable:

for php code............[php] <?php /* code goes here */ ?> [/php]
for html...............[html] .....[/html]
for js/css/other.......[code] code goes here................[/code]

Results in:

PHP Code: