How to add content tab to Ajax Tabs Content Script (v 2.2)

[bobth1019]

1) Script Title: Ajax Tabs Content Script (v 2.2)

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

3) Describe problem: Simple question, I would think but I'm new so please excuse....

I want to configure a tab to for script that would replicate tab one on the URL above in "Demo #1" as in "The default content is added inline on the page and not fetched via Ajax, to avoid unnecessary fetching of external pages." So content within another tab that is not being called externally. So 3 tabs-there would a default content tab, a page called by Ajax tab, and another tab that is "static" for lack of a better word.

I've tried various alterations as in adding another div id besides "countrydivcontainer" as in "countrydivcontainer2" but no luck and similar attempts.

How do I do this? code below. Thank you very much for your help.

<ul id="countrytabs" class="shadetabs" style=" margin-left: 10px;">
<li><a href="#" rel="#default" class="selected">History/Overview</a></li>
<li><a href="/apps/pbcs.dll/section?Category=cityoverview2" rel="countrycontainer">City Information</a></li>
<li><a href="#" rel="#default" >Map</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px #ccc solid; width:470px; margin-bottom: 1em; padding: 10px; padding-top:0px; margin-left: 10px;">
<p><%ParagraphItems%></p>
</div>

<script type="text/javascript">
var countries=new ddajaxtabs("countrytabs", "countrydivcontainer")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>

[ddadmin]

If you mean the ability to have more than 1 tab show inline content (ie: rel="#default"), try the below modified ajaxtabs.js. Then in your HTML, you'd do something like:


<ul id="countrytabs" class="shadetabs">
<li><a href="#1" rel="#default1" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="#2" rel="#default2">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p id="default1">I like puppies</p>
<p id="default2">I like kittens</p>
</div>

The first tab in this case shows the content "I like puppies", while the 3rd tab shows "I like kittens."

[bobth1019]

Thank you very much for your help...

[Foundas]

Hi,


how can you implement nested tabs using the modified version of AjaxTabs??

Thanks in advance

[stylusss]

If you mean the ability to have more than 1 tab show inline content (ie: rel="#default"), try the below modified ajaxtabs.js. Then in your HTML, you'd do something like:


<ul id="countrytabs" class="shadetabs">
<li><a href="#1" rel="#default1" class="selected">Tab 1</a></li>
<li><a href="external2.htm" rel="countrycontainer">Tab 2</a></li>
<li><a href="#2" rel="#default2">Tab 3</a></li>
<li><a href="external4.htm" rel="#iframe">Tab 4</a></li>
</ul>

<div id="countrydivcontainer" style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<p id="default1">I like puppies</p>
<p id="default2">I like kittens</p>
</div>

The first tab in this case shows the content "I like puppies", while the 3rd tab shows "I like kittens."

Where is the modified version?