JS Tutorial
Download
Demo
- Overview
- Documents
User Rating: 0/5 ( 0 votes)
Your Rating:
Tabby is a lightweight JavaScript and CSS kit for mobile-first toggle tabs. It’s style-light so you can easily modify it to fit your design.
1. INCLUDES CSS AND JS FILES
<link rel="stylesheet" href="css/tabby-css.css"> <script src="js/tabby.js"></script> <script src="buoy.js"></script>
2. HTML
Standalone Buttons
<div class="tabs">
<button class="active" data-tab="#tab1">Superheroes</button>
<button data-tab="#tab2">Ice Cream</button>
<button data-tab="#tab3">Seasons</button>
</div>
<div class="tabs-content">
<div class="tabs-pane active" id="tab1">
Superheros
...
</div>
<div class="tabs-pane" id="tab2">
Ice Cream
...
</div>
<div class="tabs-pane" id="tab3">
Seasons
...
</div>
</div>
List Links
<ul class="tabs">
<li class="active"><a data-tab="#tab1" href="#">Superheroes</a></li>
<li><a data-tab="#tab2" href="#">Ice Cream</a></li>
<li><a data-tab="#tab3" href="#">Seasons</a></li>
</ul>
<div class="tabs-content">
<div class="tabs-pane active" id="tab1">
Superheros
...
</div>
...
</div>
3. JAVASCRIPT
tabby.init();
4. OPTIONS AND SETTINGS
Tabby includes smart defaults and works right out of the box. But if you want to customize things, it also has a robust API that provides multiple ways for you to adjust the default options and settings.
Global Settings
You can pass options and callbacks into Tabby through the init() function:
tabby.init({
toggleActiveClass: 'active', // Class added to active toggle elements
contentActiveClass: 'active', // Class added to active tab content areas
initClass: 'js-tabby', // Class added to <html> element when initiated
callbackBefore: function ( toggle, tabID ) {}, // Function that's run before tab content is toggled
callbackAfter: function ( toggle, tabID ) {} // Function that's run after tab content is toggled
});
Use Tabby events in your own scripts
You can also call Tabby toggle event in your own scripts:
tabby.toggleTab(
toggle, // Node that toggles the tab action. ex. document.querySelector('#toggle')
tabID, // The ID of the tab content area to show. ex. '#content'
options, // Classes and callbacks. Same options as those passed into the init() function.
event // Optional, if a DOM event was triggered.
);
Example
var toggle = document.querySelector('[data-tab="#tab2"]');
tabby.toggleTab( toggle, '#tab2' );
