Default

$('.tabs').tabslet();
This is the default tab functionality.
Tab 2
Tab 3

Active

$('.tabs').tabslet({
  active: 2
});
Tab 1
The second tab is active when page loads.
Tab 3

Hover

$('.tabs').tabslet({
  mouseevent: 'hover',
  attribute: 'href',
  animation: false
});
Tabs change on mouse over...
Tab 2
Tab 3

Animation

$('.tabs').tabslet({
  mouseevent: 'click',
  attribute: 'href',
  animation: true
});
Change the tab to see that there is an animation.
Tab 2
Tab 3

Rotation

$('.tabs').tabslet({
  autorotate: true,
  delay: 3000
});
It's alive!
It's alive!!
It's alive!!!
Custom Events

Custom event "_before"

$('.before_event').tabslet();
$('.before_event').on("_before", function() {
  // do stuff here
});
An alert message before the tab change...
TAB 2
TAB 3

Custom event "_after"

$('.after_event').tabslet({
  animation: true
});
$('.after_event').on("_after", function() {
  // do stuff here
});
An alert message is coming after the animation...
TAB 2
TAB 3
Use of data attribute to load

The attribute "data-toggle"


  // your html for tabs
Just include the plugin and add the data attribute to your html tag!
TAB 2
TAB 3