jquery toggle tabs hide active class when clicking same tab
<p>when i click tab 1, 1 content show and active tab class is added.</p>

<p>when i click tab 2, 1 content hides remove tab active class and 2 content show and adds tab active class</p>

<p>but the effect i want is when i click tab 1, 1 content show, click again tab 1 content hides but the tab active class doesn't remove.</p>

<p>Any suggest will be help thanks</p>

<pre><code>&lt;div id="tabs_container"&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="tab_contents_container"&gt;    
      &lt;div id="tab_1_contents" class="tab_content tab_contents_active"&gt;
         Option 1 stuff     
      &lt;/div&gt;

      &lt;div id="tab_2_contents" class="tab_content"&gt;'
         Option 2 stuff&lt;/div&gt;
      &lt;/div&gt;

     &lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
$('.tab-content').hide();

  $('.tab').click(function() {
     var target = $(this.rel);          
        $('.tab-content').not(target).hide();
        target.toggle();

  $('#tabs_container &gt; .nav-tabs &gt; li.tabActive')
      .removeClass('tabActive');

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

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

  $(this.rel).addClass('tab_contents_active');
 });
 &lt;/script&gt;
</code></pre>