I have two tabbed navigations, one on the top and one at the bottom. I'm targeting the div through classes instead of id so that they both show relevant content.

When the user clicks the "Business" tab, it shows relevant information for the user, both on the top and on the bottom. My problem is that I cannot make both tabs to show the "active" state. It only shows on the tab that I clicked whether on the top or the bottom, although they have the same class name.

Any help is welcome.

Mike

HTML:

1. <ul class="tabs">

    <li><a href=".tabViewer">Are you a Viewer?</a></li>

    <li><a href=".tabBusiness">Are you a Business?</a></li>

    <li><a href=".tabPlatform">Are you a Platform?</a></li>

    </ul> 

   <!-- TOP CONTENT --> 

   <div class="registerTabsContent tabViewer"> 

   <h1>Register as a Viewer</h1>

    </div> 

   <div class="registerTabsContent tabBusiness">

    <h1>Register as a Business</h1> 

   </div> 

   <div class="registerTabsContent tabPlatform">

    <h1>Register as a Platform</h1>

    </div> 

   <!-- BOTTOM TAB --> 

   <section id="tourSummaryTabsContainer">

    <ul class="tabs"> 

   <li><a href=".tabViewer">Are you a Viewer?</a></li> 

   <li><a href=".tabBusiness">Are you a Business?</a></li>

    <li><a href=".tabPlatform">Are you a Platform?</a></li>

    </ul> 

   <!-- BOTTOM CONTENT --> 

   <div class="tourSummaryTabsContent tabViewer">

    <h1> Viewer bottom content</h1> 

   </div>

    <div class="tourSummaryTabsContent tabBusiness"> 

   <h1> Business bottom content</h1>

    </div> 

   <div class="tourSummaryTabsContent tabPlatform"> 

   <h1>Platform bottom content</h1>

    </div>

Jquery:

1. $(document).ready(function() { 

   // tabs script 

   $('.tabs li a:first').addClass('active');

    $('.registerTabsContent:not(:first), .tourSummaryTabsContent:not(:first)').hide(); 

   $('.tabs li a').click(function(){ 

   var t = $(this).attr('href'); 

   $('.tabs li a').removeClass('active');

    $(this).addClass('active'); 

   $('.registerTabsContent, .tourSummaryTabsContent').hide(); 

   $(t).fadeIn('slow'); return false;

    }) 

   });