Last Updated: February 25, 2016
·
701
· mocanuga

Ultra simple jQuery tabs

Thought I'd share with you my way of creating simple tabs with jQuery.

Just 4 lines of code.

/* jQuery code */
/* global $ */
$(function () {
    'use strict';
    $('.tabAnchors').find('a').on('click', function (e) {
        $('.tabContent').find('.' + e.currentTarget.id).show().siblings().hide();
        $(e.currentTarget).addClass('active').siblings().removeClass('active');
    });
});
/* sample markup
<div class="tabAnchors">
    <a href="javascript:;" id="tab1" class="active">Tab 1</a>
    <a href="javascript:;" id="tab2">Tab 2</a>
    <a href="javascript:;" id="tab3">Tab 3</a>
</div>
<div class="tabContent">
    <div class="tab1"></div>
    <div class="tab2" style="display: none;"></div>
    <div class="tab3" style="display: none;"></div>
</div> */

Does anyone have a shorter solution?