TabbedContent - jQuery lightweight tabs plugin

TabbedContent is a lightweight* tabs plugin that uses the HTML5 history API to add your tab navigation to your browser’s history.

* 2.6 KB packed, 1.5 KB gzipped

It is compatible with both jQuery and Zepto.js libraries.

It also has an API that will let you switch between tabs externally.

Source: elboletaire.github.io

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" href="../css/styles.css" />
<script src="//code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="../js/tabbedcontent.min.js"></script>

2. HTML

<ul>
    <li><a href="#tab-1">Tab 1</a></li>
    <li><a href="#tab-2">Tab 2</a></li>
    <li><a href="#tab-3">Tab 3</a></li>
    <li><a href="#tab-n">Tab N</a></li>
</ul>
<div class="tabscontent">
    <div id="tab-1">
        <!-- your first tab content -->
    </div>
    <div id="tab-2">
        <!-- your second tab content -->
    </div>
    <div id="tab-3">
        <!-- your third tab content -->
    </div>
    <div id="tab-n">
        <!-- your n tab content -->
    </div>
</div>

3. JAVASCRIPT

$('.tabscontent').tabbedContent();

4. OPTIONS

$('.tabscontent').tabbedContent({
    links         : '.tabs a', // the tab links
    errorSelector : '.error-message', // false to disable
    speed         : false, // speed of the show effect. Set to null or false to disable
    onSwitch      : false, // onSwitch callback
    onInit        : false, // onInit callback
    currentClass  : 'current', // current selected tab class (is set to link's parent)
    tabErrorClass : 'has-error', // class to be added to tabs containing errorSelector (is set to link's parent)
    loop          : false // if set to true will loop between tabs when using the next() and prev() api methods
});

5. API

TabbedContent has a simple API that will allow you to switch between tabs. To use it simply call data('api'):

var mytabs = $('.tabscontent').tabbedContent().data('api');

// now you can use the switch method:
mytabs.switch('#tab-1');

// or using it's index...
mytabs.switch(0); // note that first tab begins at 0

// you can also switch using id (whout #) and jQuery/Zepto objects
mytabs.switch('tab-1');
mytabs.switch($('.tabscontent div#tab-1'));

// you can also switch to next and previous tabs
mytabs.next();
mytabs.prev();

// the previous example won't loop the tabs; to do so you can set loop to true when configuring tabbedContent:
var mytabs = $('.tabscontent').tabbedContent({loop: true}).data('api');
// and / or you can pass it directly to the method:
mytabs.next(true);
mytabs.prev(true);

// check if current tab is first or last
if (mytabs.isFirst()) { /* do stuff */ }
if (mytabs.isLast()) { /* do stuff */ }

Full API

{
    // Switch to tab
    'switch'       : function apiSwitch(tab) {},
    // Switch to tab for old browsers
    'switchTab'    : function apiSwitch(tab) {},
    // Get current tab index
    'getCurrent'   : function getCurrent() {},
    // Get jQuery/Zepto object for specified tab
    'getTab'       : function getTab(tab) {},
    // Go to next tab in the tabs set
    'next'         : function next(loop) {},
    // Go to previous tab in the tabs set
    'prev'         : function prev(loop) {},
    // Returns true if current tab is first tab
    'isFirst'      : function isFirst() {},
    // Returns true if current tab is last tab
    'isLast'       : function isLast() {}
};

6. CALLBACK

TabbedContent has two callbacks that may be util to you: onInit and onSwitch.

$('.tabscontent').tabbedContent({
    onInit: function(api) {
        console.log('tabs initialized');
        console.log('Current tab is ' + api.getCurrent());
    },
    onSwitch: function(tab, api) {
        // Init a WYSIWYG editor on the tab (for example..)
        if (!$(tab + ' textarea').data('wysiwyg-initialized')) {
            initWysiwyg(tab + ' textarea');
        }
    }
});

• Basic demo
• Bootstrap demo
• Bootstrap + Zepto.js demo