2 ajax tabs on one page

[TheDennis]

Ajax Tabs Content Script

http://www.dynamicdrive.com/dynamici...axtabscontent/

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.