title: Jquery - convert to work with multiple tabs on one page?
body: <p>I'm using this code for a simple jQuery tab setup:</p>
  
  <pre><code>$('.tabs .tab_content').hide(); // Hide all divs
  $('.tabs .tab_content:first').show(); // Show the first div
  $('.tabs ul.tab_nav li:first').addClass('current_tab'); // Set the class of the first link to active
  
  $('.tabs ul.tab_nav li a').click(function(){ //When any link is clicked
      $('.tabs ul.tab_nav li a').removeClass('current_tab'); // Remove active class from all links
      $(this).addClass('current_tab'); //Set clicked link class to active
  
      var currentTab = $(this).attr('href'); // Set variable currentTab to value of href attribute of clicked link
  
      $('.tabs .tab_content').hide(); // Hide all divs
      $(currentTab).show(); // Show div with id equal to variable currentTab
      return false;
  });
  </code></pre>
  
  <p>And here's the sample HTML:</p>
  
  <pre><code>&lt;div class="box tabs"&gt;
                      &lt;div class="box_header"&gt;
      &lt;h2&gt;3/4 Width&lt;/h2&gt;
      &lt;ul class="tab_nav"&gt;
          &lt;li&gt;&lt;a href="#tab1" class="current_tab"&gt;Tab #1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab2"&gt;Tab #2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab3"&gt;Tab #3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tab4"&gt;Tab #4&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="box_content tab_content" id="tab1"&gt;1&lt;/div&gt;
  &lt;div class="box_content tab_content" id="tab2"&gt;2&lt;/div&gt;
  &lt;div class="box_content tab_content" id="tab3"&gt;3&lt;/div&gt;
  &lt;div class="box_content tab_content" id="tab4"&gt;4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>It works beautifully for one set of tabs, but if I add another set (i.e., another block of code as above) it all messes up - it treats the tabs as one big object, not two seperate tab instances. How can I convert it so that it will work? Ideally without adding much/anything to the HTML?</p>
  
  <p>Thanks!</p>
  
  <p>Alex</p>