CODEWITHSUNDEEP
jquerytabs
chowwy
chowwy

Reputation: 1126

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.

Here's another SO question that deals with something similar, but it doesn't include the active class code I have - Dealing with multiple toggles and the JS that works - http://jsfiddle.net/jHvjD/5/

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>

Upvotes: 0

Views: 15498

Answers (4)

dku.rajkumar
dku.rajkumar

Reputation: 18568

$('.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');
 });

fiddle : http://jsfiddle.net/GkGyt/2/

Upvotes: 4

Rodik
Rodik

Reputation: 4092

do $('.tab_contents_active').toggle(); before removing the class. this way they will slide up before the new tab slides down.

Upvotes: 0

ShankarSangoli
ShankarSangoli

Reputation: 69905

You can try this which is much more simpler.

$(document).ready(function(){

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

  $('.tab').click(function() {
      var activeTabContent = $(this).attr('rel');

      $('#tab_contents').not(activeTabContent).hide()
      .removeClass('tab_contents_active');

      $(activeTabContent).toggle().addClass('tab_contents_active');

      $(this).parent().addClass('active').siblings().removeClass('active');
  });
});

Upvotes: 0

Hogan
Hogan

Reputation: 70523

Why be so complex -- try the simple first:

 $('.tab_contents_active')
    .removeClass('tab_contents_active');

instead of 

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

If that works (which it will) then you can optimize.

I suspect that there is no optimization to the first code, unless your page is very very complex the additional selecters will just make it slower... but it really depends on your dom... try the simple "remove em all" solution first.

Upvotes: 0

Related Questions