A style-free tabs plugin for jQuery and Boost JS. While other plugins style and arrange your tabs and panels for you, this plugin only handles the functionality, leaving the layout and styling up to you.

Install with npm:

npm install boost-js-tabs

Install in browser:

<script src="https://cdn.rawgit.com/marksmccann/boost-js-tabs/master/dist/tabs.min.js"></script>

var boost = require('boost-js');
// var boost = $.fn.boost; (browser install)

var tabs = require('boost-js-tabs');
// var tabs = $.fn.boost.tabs; (browser install)

$.fn.tabs = boost( tabs.plugin, tabs.defaults );

<ul id="tabs">
    <li><a href="#panel1" data-bind="#tabs" data-role="tab">Tab 1</a></li>
    <li><a href="#panel2" data-bind="#tabs" data-role="tab">Tab 2</a></li>
    <li><a href="#panel3" data-bind="#tabs" data-role="tab">Tab 3</a></li>
</ul>
<div id="panel1" data-bind="#tabs" data-role="panel">Panel 1</div>
<div id="panel2" data-bind="#tabs" data-role="panel">Panel 2</div>
<div id="panel3" data-bind="#tabs" data-role="panel">Panel 3</div>

Note: data-bind is used to link the element to the instance, data-role is used to define the element's role in that instance. See Boost JS for more details.

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

$('#tabs').tabs({
	onInit: function() {
    	console.log( this.id ); // 'tabs'
    }
});

- or -

<ul id="tabs" data-active-class="your-new-class">...</ul>

Activate a tab by providing the desired panel's id. Optional callback function called after change.

instance.changeToPanel( 'panel2', function(){
    console.log("Panel 2 is now active.");
});

The id of the current active panel.

instance.activePanel // [panelID]

Each panel and corresponding tab grouped into a jquery object and organized by panel id.

instance.pairsByPanel // { panel1: $( 0:tab1, 1:panel1 ), ... }

$ npm install && npm test

Copyright © 2016, Mark McCann. Released under the MIT license.