multiple tab sets one one page

hey guys, am using the following jquery for a tabbed module on a page... <script type='text/javascript'>       $(document).ready(function() {                //Default Action         $('.tab_content').hide(); //Hide all content         $('ul.tabs li:first').addClass('active').show(); //Activate first tab         $('.tab_content:first').show(); //Show first tab content                  //On Click Event         $('ul.tabs li').click(function() {           $('ul.tabs li').removeClass('active'); //Remove any active class           $(this).addClass('active'); //Add active class to selected tab           $('.tab_content').hide(); //Hide all tab content           var activeTab = $(this).find('a').attr('href'); //Find the rel attribute value to identify the active tab + content           $(activeTab).fadeIn(); //Fade in the active content           return false;         });              });     </script> what i would like to do is have two (or more) tabbed modules, but at the moment if i simply duplicate the module (giving different ids etc) they seem to conflict - well work as one set ?? do i need to completely rename the new set and create a duplicate css set? <ul class="tabs">   <li><a href="#tab1">Tab 1</a></li>   <li><a href="#tab2">Tab 2</a></li>   <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container">   <div id="tab1" class="tab_content"></div>      <div id="tab2" class="tab_content"></div>      <div id="tab3" class="tab_content"></div>    </div> mike

Mike, try this: <script type="text/javascript"> $(document).ready(function() {     //Default Action     $('.tab_content').hide();     $('ul.tabs').each(function(i, el){         var uid = this.id;         $('li:first', $(this)).addClass('active').show();         $('.tab_content:first', $('.'+uid)).show();     });     //On Click Event     $('ul.tabs li').click(function() {         var el = $(this);         var uid = el.parent().attr('id');         $('li', $('#'+uid)).removeClass('active');         el.addClass('active');         $('.tab_content', $('.'+uid)).hide();         var activeTab = el.find('a').attr('href');         $(activeTab).fadeIn();         return false;     }); }); </script> <ul id="tabset1" class="tabs">     <li><a href="#tab1">Tab 1</a></li>     <li><a href="#tab2">Tab 2</a></li>     <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container tabset1">     <div id="tab1" class="tab_content">Tab 1</div>     <div id="tab2" class="tab_content">Tab 2</div>     <div id="tab3" class="tab_content">Tab 3</div> </div> <ul id="tabset2" class="tabs">     <li><a href="#tab4">Tab 4</a></li>     <li><a href="#tab5">Tab 5</a></li>     <li><a href="#tab6">Tab 6</a></li> </ul> <div class="tab_container tabset2">     <div id="tab4" class="tab_content">Tab 4</div>     <div id="tab5" class="tab_content">Tab 5</div>     <div id="tab6" class="tab_content">Tab 6</div> </div> On 12/06/2010 06:05, Mike Little wrote: ----- Excess quoted text cut - see Original Post for more -----

hmmm... it says there is a reply to this post but nothing is showing?

let me try and re-post (see below). Azadi Mike, try this: (note the extra IDs and CLASSes added to various elements!) <script type="text/javascript"> $(document).ready(function() {     //Default Action     $('.tab_content').hide();     $('ul.tabs').each(function(i, el){         var uid = this.id;         $('li:first', $(this)).addClass('active').show();         $('.tab_content:first', $('.'+uid)).show();     });     //On Click Event     $('ul.tabs li').click(function() {         var el = $(this);         var uid = el.parent().attr('id');         $('li', $('#'+uid)).removeClass('active');         el.addClass('active');         $('.tab_content', $('.'+uid)).hide();         var activeTab = el.find('a').attr('href');         $(activeTab).fadeIn();         return false;     }); }); </script> <ul id="tabset1" class="tabs">     <li><a href="#tab1">Tab 1</a></li>     <li><a href="#tab2">Tab 2</a></li>     <li><a href="#tab3">Tab 3</a></li> </ul> <div class="tab_container tabset1">     <div id="tab1" class="tab_content">Tab 1</div>     <div id="tab2" class="tab_content">Tab 2</div>     <div id="tab3" class="tab_content">Tab 3</div> </div> <ul id="tabset2" class="tabs">     <li><a href="#tab4">Tab 4</a></li>     <li><a href="#tab5">Tab 5</a></li>     <li><a href="#tab6">Tab 6</a></li> </ul> <div class="tab_container tabset2">     <div id="tab4" class="tab_content">Tab 4</div>     <div id="tab5" class="tab_content">Tab 5</div>     <div id="tab6" class="tab_content">Tab 6</div> </div> On 14/06/2010 11:41, Mike Little wrote: > hmmm... it says there is a reply to this post but nothing is showing?

got it! thanks heaps azadi - i will give this a go today. mike

works perfectly azadi. cheers. mike