toggle tab

by Rich Costello

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">
        <h1>
        test mw
        </h1>
        <p>
        goog
        </p>
        </div>

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

JavaScript

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

  $('.tab').click(function() {
     var target = $(this.rel);          
        $('.tab_contents').not(target).hide();
        target.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');
 });