title: jquery toggle tabs with an extra toggle function
body: <p>I've got some tabs setup; here's what they currently do:</p>
  
  <ol>
  <li>hide content when page is opened </li>
  <li>show content on tab click (with a toggle so user can show/hide/show/hide the content) </li>
  <li>active tab changes color when selected</li>
  </ol>
  
  <p>The issue: when the user clicks on one of the tabs and shows the content, and then clicks on the other tab, both sets of content show (like a cumulative toggle).</p>
  
  <p>I want to set it up so that if the user clicks a tab and shows the content, and then clicks the other tab, the content showing for the first tab clicked will hide.</p>
  
  <p>Here's another SO question that deals with something similar, but it doesn't include the active class code I have - <a href="https://stackoverflow.com/questions/4203026/dealing-with-multiple-toggles">Dealing with multiple toggles</a> and the JS that works - <a href="http://jsfiddle.net/jHvjD/5/" rel="nofollow noreferrer">http://jsfiddle.net/jHvjD/5/</a></p>
  
  <p><strong>JQUERY</strong></p>
  
  <pre><code>$(document).ready(function(){
  
    $('.tab_contents').hide();
  
    $('.tab').click(function() {
  
        $(this.rel).toggle();
  
    $('#tabs_container &gt; .tabs &gt; li.active')
        .removeClass('active');
  
    $(this).parent().addClass('active');
  
    $('#tabs_container &gt; .tab_contents_container &gt; div.tab_contents_active')
        .removeClass('tab_contents_active');
  
    $(this.rel).addClass('tab_contents_active');
   });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>     &lt;div id="tabs_container"&gt;
  
        &lt;!-- These are the tabs --&gt;
        &lt;ul class="tabs"&gt;
          &lt;li&gt;
            &lt;a href="#" rel="#tab_1_contents" class="tab"&gt;Option 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="#" rel="#tab_2_contents" class="tab"&gt;Option 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div class="clear"&gt;&lt;/div&gt;
  
        &lt;div class="tab_contents_container"&gt;
  
          &lt;!-- Tab 1 Contents --&gt;
          &lt;div id="tab_1_contents" class="tab_contents tab_contents_active"&gt;Option 1 stuff        &lt;/div&gt;
  
          &lt;!-- Tab 2 Contents --&gt;
          &lt;div id="tab_2_contents" class="tab_contents"&gt;Option 2 stuff&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>