1

I made a tab panel with jquery, nothing special. When you click an h6 tab, the tab content appears and hides all other tab content. Also active tab class is added for a bit of styling.

Works fine, but it's getting to be very repetitive. Can anyone help write it in a more re-usable format? for example no repetitive code, no matter how many tabs/tab contents I create.

the html

<div class="tabpanelwrap">
    <div class="tabcontrols">
        <h6>Tab One</h6>
        <h6>Tab Two</h6>
        <h6>Tab Three</h6>
    </div>
    <div id="tab_one" class="tab">
        content
    </div>
    <div id="tab_two" class="tab">
        content
    </div>
    <div id="tab_three" class="tab">
        content
    </div>
</div>

the jquery

//hides all but the first tab content
jQuery("#tab_two, #tab_three").hide();

//add a class for styling to the first tab.
jQuery(".tabcontrols h6:nth-child(1)").addClass('dsm-activetab');

    //grabs the first h6 shows first tab content hides all others
    jQuery(".tabcontrols h6:nth-child(1)").click(function () {
        jQuery(".tabcontrols h6").removeClass('dsm-activetab');
        jQuery(this).addClass('dsm-activetab');
        jQuery("#tab_one").show();
        jQuery("#tab_two, #tab_three").hide();
    });

    jQuery(".tabcontrols h6:nth-child(2)").click(function () {
        jQuery(".tabcontrols h6").removeClass('dsm-activetab');
        jQuery(this).addClass('dsm-activetab');
        jQuery("#tab_two").show();
        jQuery("#tab_one, #tab_three").hide();
    });

    jQuery(".tabcontrols h6:nth-child(3)").click(function () {
        jQuery(".tabcontrols h6").removeClass('dsm-activetab');
        jQuery(this).addClass('dsm-activetab');
        jQuery("#tab_three").show();
        jQuery("#tab_one, #tab_two").hide();
    });
1
  • Add the markup for your tabs? No content required, just structure.
    – Polynomial
    Oct 24, 2014 at 11:34

2 Answers 2

0

You can make it like this, using data attribute for h6 :)

//hides all but the first tab content
jQuery(".tab").hide();
jQuery(".tab").eq(0).show();

//add a class for styling to the first tab.
jQuery(".tabcontrols h6").eq(0).addClass('dsm-activetab');


jQuery(".tabcontrols h6").on('click', function() {
  var showId = $(this).data('tab');
  jQuery(".tabcontrols h6").removeClass('dsm-activetab');
  jQuery(this).addClass('dsm-activetab');
  jQuery(".tab").hide();
  jQuery("#"+showId).show();
  
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="tabpanelwrap">
  <div class="tabcontrols">
    <h6 data-tab="tab_one">Tab One</h6>
    <h6 data-tab="tab_two">Tab Two</h6>
    <h6 data-tab="tab_three">Tab Three</h6>
  </div>
  <div id="tab_one" class="tab">
    content 1
  </div>
  <div id="tab_two" class="tab">
    content 2
  </div>
  <div id="tab_three" class="tab">
    content 3
  </div>
</div>

0
0

This should avoid needing data attributes and specific ids, instead relying on the order of the tabs and the tab content being the same. It works regardless of how many tabs you want to add without changing the script at all - commented to explain.

//hides all but the first tab regardless of how many you add
jQuery(".tab:gt(0)").hide();

//add a class for styling to the first tab.
jQuery(".tabcontrols h6:first").addClass('dsm-activetab');

//generic handler for any tab that's clicked
jQuery(".tabcontrols h6").click(function () {
    //get the index of the clicked tab
    var index = jQuery('.tabcontrols h6').index(jQuery(this));

    //remove all active tab classes
    jQuery(".tabcontrols h6").removeClass('dsm-activetab');

    //add to the appropriate tab
    jQuery(this).addClass('dsm-activetab');

    //hide all tab content
    jQuery(".tab").hide();

    //show the tab with the same index as the heading
    jQuery(".tab").eq(index).show();
});

And the markup can now just be...

<div class="tabpanelwrap">
    <div class="tabcontrols">
        <h6>Tab One</h6>
        <h6>Tab Two</h6>
        <h6>Tab Three</h6>
    </div>
    <div class="tab">
        content
    </div>
    <div class="tab">
        content
    </div>
    <div class="tab">
        content
    </div>
</div>

Just make sure the number of h6 and .tab elements match and you're good.

1
  • Thanks, that's a lot better. Oct 24, 2014 at 13:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.