2 ajax tabs on one page

[TheDennis]

Ajax Tabs Content Script

http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/

Hi

I followed you tutorial for the ajax tabs and it's working fine. But i'm trying to have a secondary set of tabs to replace to first set of tabs. But i can only get one two work at a time - the secondary tabs replace the first ones, but when you click the new tabs to view their content it just opens up in a new page, instead of loading it into the content box. I tried renaming the countries variable but that didn't seem to help...

Heres my code:


<div id="contentdivcontainer">

<div id="contentdivcontainer2"><img src="images/photos/photo16.jpg"></div>

<div id="contenttabs2">
<a href="#" rel="#default" class="selected"><img src="images/photos/thumbs/thumb_blue.jpg"></a>
<a href="photography/photo15.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_pipes.jpg"></a>
<a href="photography/photo14.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_girl.jpg"></a>
<a href="photography/photo13.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_roof.jpg"></a>
<a href="photography/photo12.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_chairs.jpg"></a>
<a href="photography/photo11.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_jars.jpg"></a>
<a href="photography/photo10.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_wood.jpg"></a>
<a href="photography/photo9.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_boxing.jpg"></a>
<a href="photography/photo8.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_paint.jpg"></a>


</div>

<div id="contenttabs3">
<center><a href="#" rel="#default" class="selected">Page1</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="photography/morelinks.html" rel="contentcontainer">Page2</a></center>
</div>

</div>







</div>

<script type="text/javascript">

var countries=new ddajaxtabs("contenttabs2", "contentdivcontainer2")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<script type="text/javascript">

var countries=new ddajaxtabs("contenttabs3", "contenttabs2")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

[ddadmin]

The variable assigned to the initialization code for each Ajax Tabs instance needs to be unique, so instead of "coutnries", give the 2nd instance a unique variable name, ie:


var mycontent=new ddajaxtabs("contenttabs3", "contenttabs2")
mycontent.setpersist(true)
mycontent.setselectedClassTarget("link") //"link" or "linkparent"
mycontent.init()

[TheDennis]

Hi

I tried renaming the variable, but it's still doing the same thing.

Heres a link to my site if you need to check it out.

http://designperhaps.com/newsite/photography.html

Cheers

[ddadmin]

You also need to have separate, duplicate HTML markup for each instance of Ajax tabs on your site. Right now it's a strange semi combination, where there is only one content DIV container (#contentdivcontainer2) for both instances.

Instead of:


<div id="contentdivcontainer">

<div id="contentdivcontainer2"><img src="images/photos/photo16.jpg"></div>

<div id="contenttabs2">
<a href="#" rel="#default" class="selected"><img src="images/photos/thumbs/thumb_blue.jpg"></a>
<a href="photography/photo15.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_pipes.jpg"></a>

<a href="photography/photo14.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_girl.jpg"></a>
<a href="photography/photo13.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_roof.jpg"></a>
<a href="photography/photo12.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_chairs.jpg"></a>
<a href="photography/photo11.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_jars.jpg"></a>
<a href="photography/photo10.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_wood.jpg"></a>
<a href="photography/photo9.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_boxing.jpg"></a>
<a href="photography/photo8.html" rel="contentcontainer"><img src="images/photos/thumbs/thumb_paint.jpg"></a>


</div>


<div id="contenttabs3">
<center><a href="#" rel="#default" class="selected">Page1</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="photography/morelinks.html" rel="contentcontainer">Page2</a></center>
</div>

</div>

Try replacing that with:


<div id="contentdivcontainer2"><img src="images/photos/photo16.jpg"></div>

<div id="contenttabs2">
<a href="#" rel="#default" class="selected"><img src="images/photos/thumbs/thumb_blue.jpg"></a>
<a href="photography/photo15.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_pipes.jpg"></a>
<a href="photography/photo14.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_girl.jpg"></a>
<a href="photography/photo13.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_roof.jpg"></a>
<a href="photography/photo12.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_chairs.jpg"></a>
<a href="photography/photo11.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_jars.jpg"></a>
<a href="photography/photo10.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_wood.jpg"></a>
<a href="photography/photo9.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_boxing.jpg"></a>
<a href="photography/photo8.html" rel="contentdivcontainer2"><img src="images/photos/thumbs/thumb_paint.jpg"></a>


</div>


<div id="contentdivcontainer3"><img src="images/photos/photo16.jpg"></div>

<div id="contenttabs3">
<center><a href="#" rel="#default" class="selected">Page1</a>&nbsp;&nbsp;&nbsp;&nbsp;
<a href="photography/morelinks.html" rel="contentdivcontainer3">Page2</a></center>
</div>


<script type="text/javascript">

var countries=new ddajaxtabs("contenttabs2", "contentdivcontainer2")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()

</script>

<script type="text/javascript">

var mycontent=new ddajaxtabs("contenttabs3", "contentdivcontainer3")
mycontent.setpersist(true)
mycontent.setselectedClassTarget("link") //"link" or "linkparent"
mycontent.init()

</script>

Try and notice the differences in the markup that properly defines two instances of Ajax Tabs HTML markup wise.