Flexible jQuery Tabbed Content Plugin - Herotabs

Herotabs is a lightweight (~4.4kb minified) jQuery plugin that makes it easy to switch html content between tabs, which supports keyboard navigation, touch event, switching delay and vertical & horizontal layouts.

You might also like:

• Flexible-jQuery-Tabbed-Interface-Plugin-SmartTab
• Tabbed Content Slider Plugin with jQuery and XML - tNews
• Google Play Tabbed Navigation with jQuery and CSS3
• Simple jQuery Tab Navigation Menu Plugin - simpleTab
• Android-Like jQuery Tab Navigation Plugin - ShiftyNav
• Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent

Installation:

# Yarn
yarn add jquery.herotabs

# NPM
$ npm install jquery.herotabs

Basic Usage:

1. Create the html

<div class="tabs tabs-standard">
<ul class="tab-nav js-nav">
<li class="tab-nav-item js-nav-item"><a href="#tab1">First tab!</a></li>
<li class="tab-nav-item js-nav-item"><a href="#tab2">Second tab!</a></li>
<li class="tab-nav-item js-nav-item"><a href="#tab3">Third tab!</a></li>
</ul>
<div>
<div class="tab-pane js-tab" id="tab1">
<p>Content 1.</p>
</div>
</div>
<div class="tab-pane js-tab" id="tab2">
<p>Content 2.</p>
</div>
<div class="tab-pane js-tab" id="tab3">
<p>Content 3.</p>
</div>
</div>

2. The CSS

.tab-nav {
margin: 0;
padding: 0;
list-style-type: none;
}
.tabs-hero {
position: relative;
width: 600px;
margin-bottom: 50px;
}
.tabs-hero .tab-nav {
position: absolute;
}
.tabs-hero .tab-info, .tabs-hero .tab-nav-item {
background-color: #333;
background-color: rgba(0, 0, 0, .7);
border-radius: 5px;
color: #fff;
}
.tabs-hero .tab-nav-current {
background-color: #666;
background-color: rgba(0, 0, 0, .4);
}
.tabs-hero .tab-info {
position: absolute;
padding: 0 10px;
}
.tabs-hero .tab-info a {
color: inherit;
}
.tabs-hero .tab-nav-item a {
display: block;
padding: 10px;
color: inherit;
text-decoration: none;
}
.tabs-standard .tab-nav-item {
display: inline-block;
background-color: #ddd;
}
.tabs-standard .tab-nav-item a {
display: block;
padding: 10px;
}
.tabs-standard .tab-nav-current {
background-color: #bbb;
}
.tabs-standard .tab-pane {
background-color: #bbb;
padding: 10px;
}
.tabs-standard p {
margin: 0;
}

3. Include jQuery library and jQuery Herotabs on the page

<script src="jquery.min.js"></script>
<script src="dist/jquery.herotabs.js"></script> 

4. Call the plugin with options

$('.tabs-standard').herotabs({
delay: 2000
});

5. Default settings.

// How long between each tab change
delay: 0,

// Fade transition between tabs
duration: 0,

// Easing types
easing: 'ease-in-out',

// Index of the tab to show first
startOn: 0,

// Will reverse display order of tabs when on a timed delay
reverse: false,

// Event to interact with the tab navigation. 
// Possible values are click or hover default click
interactEvent: 'click',

// If the browser supports touch then Herotabs will try to use it instead of the interactEvent above
useTouch: true,

// Use keyboard keys
useKeys: true,

// Callbacks
onSetup: null,
onReady: null,

// Classes applied to the HTML structure
css: {
  active: 'is-active',
  current: 'tab-current',
  avCurrent: 'tab-nav-current',
  navId: 'tabnav'
},

// CSS selectors to grab the HTML
selectors: {
  tab: '.js-tab',
  nav: '.js-nav',
  navItem: '.js-nav-item'
},

// z-index values applied to the tabs
zIndex: {
  bottom: 1,
  top: 2
}

Change logs:

v4.0.0 (2017-05-23)

• Simplify regex
• Fix external nav urls not opening on click

v3.0.5 (2015-12-14)

• update.

v3.0.4 (2015-02-27)

• Use $.noop for setup/ready callbacks

v2.0.0 (2015-02-25)

• update.

v1.2.3 (2014-02-04)

• Add hide event

v1.2.2 (2014-01-15)

• updated to the latest version

v1.2.0 (2013-08-01)

• updated to the latest version

 

---

This awesome jQuery plugin is developed by simonsmith. For more Advanced Usages, please check the demo page or visit the official website.