Last Updated: February 25, 2016
·
763
· 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?