minitabs

jQuery super-easy tabs Plugin.

Install

Use the code from this repo or: bower install minitabs. This plugin is requirejs compatible.

Usage:

Default HTML structure

(you can use your html structure as well, see below Custom elements)

    <div class="tabs"> <!-- tabs -->
        <ul class="tab-index"> <!-- tabs index -->
            <li><a href="#content1">Content 1</a></li>
            <li><a href="#content2">Content 2</a></li>
        </ul>

        <section class="tab-content" id="content1"> <!-- tabs content -->
            Content 1
        </section>

        <section class="tab-content" id="content2"> <!-- tabs content -->
            Content 2
        </section>
    </div>

Init

Default configuration:

$('.tabs').tabs();

Custom elements:

$('.tabs').tabs({
    indexSelector: '> ul a', // selector for the tabs index
    contentSelector: '> section' // selector for the tabs content
});

this example uses the actual default configuration, change the selectors to suit your needs.

Custom active class:

By default the class is-active is applied to the selected tab index element. But you can configure it when you init the tabs:

.tabs > section {
    display: none;
}
.tabs > section.my-active-class {
    display: block;
}

$('.tabs').tabs({
    // other init options...
    activeClass: 'my-active-class'
});

Destroy

$('.tabs').destroy();

Custom events

Two custom event are triggered when the tabs content elements are shown or hidden:

• show.tabs
• hide.tabs

You can attach listeners to that events:

$('#content1').on('show.tabs', function () {
    alert('This is triggered when #content1 tab is shown');
});

$('#content2').on('hide.tabs', function () {
    alert('This is triggered when #content2 tab is hidden');
});

Also, the event click.tabs is triggered when the user clicks on any of the tab index elements.

Setting the default tab

Just add the .tab-active class (or your custom active class, see above) to the tab index that you want to show by default.