Ajax Tabs Problem: Secondary menu

[Inspired87]

1) Script Title:
Tab Content Script (v 2.2)

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

3) Describe problem:
Hi.

First off: Your script works awesome!

But i have a problem, i need it to work in two levels.
The first tab-section is the main menu, the second is the submenu.
- The submenu open the links as a page, not included in the spesified <div>.
- All my links have rel="div_id".
- All divs have different ids in sub- and mainmenu
- I use the same .js file, but different variables in new ddajaxtabs()
- The default page does not show
- All my input is .php files, so the pages from the mainmenu has the submenu in the php file.

Is this a familiar problem? Anyone made sub- and mainmenus in one page before?v Any ideas how to fix it?

Thanks in advance.

[ddadmin]

Are you basically asking how to have nested tabs? If so, simply define two instances of Tab Content script, with the second instance contained inside one of the content DIVs of the first. I've modified the 1st demo on the script page to illustrate this below:


<h3>Demo #1- Basic implementation</h3>

<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected">Tab 1</a></li>
<li><a href="#" rel="country2">Tab 2</a></li>
<li><a href="#" rel="country3">Tab 3</a></li>
<li><a href="#" rel="country4">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>

<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">

<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />


</div>

<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />

<ul id="statetabs" class="shadetabs">
<li><a href="#" rel="state1" class="selected">Tab 1</a></li>
<li><a href="#" rel="state2">Tab 2</a></li>
<li><a href="#" rel="state3">Tab 3</a></li>
</ul>

<div id="state1">
NY
</div>

<div id="state2">
WA
</div>

<div id="state3">
TO
</div>

<script type="text/javascript">

var states=new ddtabcontent("statetabs")
states.setpersist(true)
states.setselectedClassTarget("link") //"link" or "linkparent"
states.init()

</script>


</div>

<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>

<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>

</div>

<script type="text/javascript">

var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>

<hr />