Last Updated: February 25, 2016
·
1.103K
· g

Simple Tabs

Simple Tabs with jQuery

Working Example
http://jsfiddle.net/gregbabula/7L2Yx/

jQuery

//G5 Tabs
var g5Tabs = function(){

    //Store Variables
    var $tabs = $('.tabs'),
        $tabLink = $tabs.find('.headlink'),
        $tabContent = $tabs.find('.tab-content article');

    //Show First Section
    $tabContent.first().fadeIn('slow').addClass('active');

    //Tab Functionality
    $tabLink.on('click', function(event){

        var _this = this,
            _li = $(_this).parent();

        if ( !_li.is('.active') ) {

            _li.addClass('active').siblings('li').removeClass('active');

            $tabContent.hide().removeClass('active').eq(_li.index()).fadeIn('slow').addClass('active');

        };

        event.preventDefault();

    });

};

//Ready
$(document).ready(function(){

    //Init. G5 Tabs
    g5Tabs();

});​