Lightweight jQuery Responsive Tabs & Accordion Plugin - Responsive Tabs

Responsive Tabs is a lightweight and simple jQuery plugin for responsive tabbed interface that will transform to an accordion on window size change.

Installation:

# NPM
$ npm install responsive-tabs --save

# Bower
$ bower install responsive-tabs --save

Basic Usage:

1. Include jQuery library and jQuery Responsive Tabs Plugin on the web page

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/jquery.responsiveTabs.js"></script>

2. Include required css file to style the plugin

<link rel="stylesheet" href="css/responsive-tabs.css" />

3. Create the html for the tab navigation & tabbed content.

<div id="horizontalTab">
  <ul>
    <li><a href="#tab-1">Responsive Tab-1</a></li>
    <li><a href="#tab-2">Responsive Tab-2</a></li>
    <li><a href="#tab-3">Responsive Tab-3</a></li>
  </ul>
  <div id="tab-1">
    <p> ... </p>
  </div>
  <div id="tab-2">
    <p> ... </p>
  </div>
  <div id="tab-3">
    <p> ... </p>
  </div>
</div>

4. The necessary CSS styles. Copy the following CSS snippets and paste them into your document or directly include the stylesheet responsive-tabs.css on the page.

.r-tabs .r-tabs-nav {
  margin: 0;
  padding: 0;
}

.r-tabs .r-tabs-tab {
  display: inline-block;
  margin: 0;
  list-style: none;
}

.r-tabs .r-tabs-panel {
  padding: 15px;
  display: none;
}

.r-tabs .r-tabs-accordion-title {
  display: none;
}

.r-tabs .r-tabs-panel.r-tabs-state-active {
  display: block;
}

/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
  .r-tabs .r-tabs-nav {
      display: none;
  }

  .r-tabs .r-tabs-accordion-title {
      display: block;
  }
}

5. Call the plugin to enable the responsive tabs plugin.

$(function(){
  $('#horizontalTab').responsiveTabs({

    // Start with the panels collapsed if the view is currently accordion based
    startCollapsed: 'accordion', 

    // Tabs can be collapsed
    collapsible: true, 

    // Tabs auto rotate
    rotate: false 
    
  });
});

6. All plugin options with default values.

// called after a tab is selected
active: null,

// specify the event that activates a tab
event: 'click',

// An array with zero based integers that define the tabs that should be disabled
disabled: [],

// If set to 'true' the panels are collapsible. 
// 'tabs', 'accordion', true or false
collapsible: 'accordion',

// Defines if the first panel on load starts collapsed or not. 
// 'tabs', 'accordion', true or false
startCollapsed: false,

// auto rotate the tabs
rotate: false,

// the setting of a reference to the selected tab in the URL hash.
setHash: false,

// enables the animation of the panels
// 'default', 'fade' or 'slide'
animation: 'default',

// queues the animation
// e.g. true, false, 'accordion', 'tabs'
animationQueue: false,

// animation duration
duration: 500,

// makes the height auto adapt to the content
fluidHeight: true,

// auto scroll to the accordion panel
scrollToAccordion: false,

// enables scroll to accordion on load
scrollToAccordionOnLoad: true,

// enables auto scroll to the accordion panel
scrollToAccordionOffset: 0,

// accordion tab element
accordionTabElement: '<div></div>',

// selects a different container element for the navigation
navigationContainer: '',

// called after a tab is clicked
click: function(e, tab){},

// An 0 based integer that defines the initial opened tab on load.
activate: function(e, tab){},

// called after a tab is deactivated
deactivate: function(e, tab){},

// called after the plugin has been loaded
load: function(e, firstTab){},

// called after the plugin switches from state
activateState: function(){},

// default CSS classes
classes: {
  stateDefault: 'r-tabs-state-default',
  stateActive: 'r-tabs-state-active',
  stateDisabled: 'r-tabs-state-disabled',
  stateExcluded: 'r-tabs-state-excluded',
  container: 'r-tabs',
  ul: 'r-tabs-nav',
  tab: 'r-tabs-tab',
  anchor: 'r-tabs-anchor',
  panel: 'r-tabs-panel',
  accordionTitle: 'r-tabs-accordion-title'
}

7. API methods.

// opens tab 3
$('#horizontalTab').responsiveTabs('activate', 2); 

// closes tab 3
$('#horizontalTab').responsiveTabs('deactivate', 2); 

// enables tab 3
$('#horizontalTab').responsiveTabs('enable', 2); 

// disables tab 3
$('#horizontalTab').responsiveTabs('disable', 2); 

// starts the rotatrion of the tab
$('#horizontalTab').responsiveTabs('startRotation', 1000); 

8. Event handlers.

$('#horizontalTab').on('tabs-load', function(e){
  // do something
})

$('#horizontalTab').on('tabs-activate', function(e, activeTab){
  // do something
})

$('#horizontalTab').on('tabs-deactivate', function(e, deactiveTab){
  // do something
})

$('#horizontalTab').on('tabs-activate-state', function(e, oldState, newState){
  // do something
})

Changelogs:

2019-11-29

• Updated API.
• Updated Doc

v1.6.3 (2017-10-29)

• Update

v1.6.2 (2016-11-09)

• Fix calling equaliseHeights() on windows resize
• Fix/ie pushstate

v1.6.1 (2016-08-15)

• Refactored click callback to match the plugin structure

v1.6.0 (2016-02-16)

• update.

v1.5.2 (2015-12-11)

• update.

v1.4.5 (2015-05-04)

• Removed unused event object

v1.4.4 (2015-04-24)

• Removed unused event object

v1.4.2 (2014-12-18)

• Update.

v1.4.0 (2014-08-03)

• Update.

v1.3.5 (2014-06-11)

• Added tab object as an arg to the animate callback

v1.3.4 (2014-05-28)

• update.

v1.3.3 (2014-04-01)

• update.

v1.3.1 (2014-03-28)

• Added classes and css for accordion state

v1.3.0 (2014-03-27)

• Added disabled setting
• Improved the demo a bit

v1.2.0 (2014-02-06)

• Added 'active' option

v1.1.2 (2014-01-15)

• Fixed default animation bug

v1.1.1 (2013-11-15)

• Added Tabs collapsibility based on the state.

v1.1.0 (2013-11-01)

• Added animation

v1.0.2 (2013-08-19)

• Added the setHash option

---

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