smd_tabs

Tab Content

Usage no npm install needed!

<script type="module">
  import smdTabs from 'https://cdn.skypack.dev/smd_tabs';
</script>

README

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

Variable Default Type
tabItems li $(selector)
tabLink a $(selector)
attrb href string
activeClass active string
checkHash false boolean

2. Callbacks

Variable Default Type
onInit false function
onChange false function

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