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)
<!-- tabs --> <!-- tabs index --> Content 1 Content 2 <!-- tabs content --> Content 1 <!-- tabs content --> Content 2
Init
Default configuration:
;
Custom elements:
;
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:
;
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:
; ;
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.