jquery toggle tabs with an extra toggle function

I’ve got some tabs setup; here’s what they currently do:

1. hide content when page is opened
2. show content on tab click (with a toggle so user can show/hide/show/hide the content)
3. active tab changes color when selected

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).

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.

JQUERY

$  (document).ready(function(){

  $  ('.tab_contents').hide();

  $  ('.tab').click(function() {

      $  (this.rel).toggle();

  $  ('#tabs_container > .tabs > li.active')
      .removeClass('active');

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

  $  ('#tabs_container > .tab_contents_container > div.tab_contents_active')
      .removeClass('tab_contents_active');

  $  (this.rel).addClass('tab_contents_active');
 });
});

HTML

     <div id="tabs_container">

      <!-- These are the tabs -->
      <ul class="tabs">
        <li>
          <a href="#" rel="#tab_1_contents" class="tab">Option 1</a>
        </li>
        <li><a href="#" rel="#tab_2_contents" class="tab">Option 2</a></li>
      </ul>

      <div class="clear"></div>

      <div class="tab_contents_container">

        <!-- Tab 1 Contents -->
        <div id="tab_1_contents" class="tab_contents tab_contents_active">Option 1 stuff        </div>

        <!-- Tab 2 Contents -->
        <div id="tab_2_contents" class="tab_contents">Option 2 stuff</div>
        </div>

newest questions tagged jquery – Stack Overflow