Modified nested ajax tabs with content

[Foundas]

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

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

3) Describe problem:

Hi guys,

im using the modified ajax tabs where i have 4 tabs with content instead of loading external files.

Is there a way to implement nested tabs lets say, inside Tab1??????

<div id="contentdivcontainer" style="border:0px; width:100%; height: 100%;">
     <div id="default1">
         Text for tab1
        <a href="javascript:mytabsindex.cycleit('next')">Read more</a>
     </div>
     <div id="default2">
         Text for tab2
        <a href="javascript:mytabsindex.cycleit('next')">Read more</a>
     </div>
     <div id="default3">
         Text for tab3
        <a href="javascript:mytabsindex.cycleit('next')">Read more</a>
     </div>
     <div id="default4">
         Text for tab4
        <a href="javascript:mytabsindex.cycleit('next')">Return</a>
     </div>
</div>
<div id="servicestabs" style="display:none">
      <ul>
	<li><a href="#1" rel="#default1" class="selected"></a></li>
	<li><a href="#2" rel="#default2"></a></li>
	<li><a href="#3" rel="#default3"></a></li>
	<li><a href="#4" rel="#default4"></a></li>
     </ul>
</div>
<script type="text/javascript">
   var mytabsindex=new ddajaxtabs("servicestabs", "contentdivcontainer")
   mytabsindex.setpersist(false)
   mytabsindex.setselectedClassTarget("link") //"link" or "linkparent"
   mytabsindex.init()
</script>

Thanks in advance

Foundas

[Foundas]

Is this not possible???


Thanks in advance

[ddadmin]

Simply create a new instance of Tab Content script inside one of your tab content DIVs. For example:

<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 />

<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>
</ul>

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

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

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

</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="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</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>

[Foundas]

Many thanks DDAdmin..

it was perfectly!!!!!