1.0.0 • Published 10 years ago

smd_tabs v1.0.0

Weekly downloads
2
License
MIT
Repository
github
Last release
10 years ago

#jQuery Tab Content

Package Managers

// npm
npm install smd_tabs

// bower
bower install smd_tabs

Set up your HTML

<div class="tabs-area">
    <ul class="tabs-link">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
    <div class="tab-holder">
        <div id="tab1">
            <p> Content </p>
        </div>
        <div id="tab2">
            <p> Content </p>
        </div>
        <div id="tab3">
            <p> Content </p>
        </div>
        <div id="tab4">
            <p> Content </p>
        </div>
    </div>
</div>

Call the plugin

$(document).ready(function() {
    $('.tabs-link').jqTabContent();
});

Customizing

1. Options

2. Callbacks

Popup Data methods

// Initialize Plugin
$('.tabs-link').jqTabContent();
 
// Get popup instance data
var instance = $('.tabs-link').data('JQTabContent');

// Public methods
instance.showTab(item, tab);  // show current tab
instance.hideTab(item, tab);  // hide current tab
instance.prevTab();           // go to prev tab
instance.nextTab();           // go to next tab
instance.numTab(x);           // go to x tab
instance.destroy();           // destroy tabs
1.0.0

10 years ago