Back to post

Responsive-Tabs is a very useful jQuery plugin that converts the tabs to accordion on mobile automatically through CSS breakpoint. By default, it transforms to an accordion below 768px, but you can modify this breakpoint in CSS as per your requirements.

Features:

Install with Bower

$ bower install responsive-tabs

Install with NPM

$ npm install responsive-tabs

How to use it:

1. Include the Javascript jquery.responsiveTabs.min.js at the bottom of the web page.

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

2. Include the CSS responsive-tabs.css in the header of the page.

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

3. Add the basic HTML to the page.

<div id="defaultTabs">
    <ul>
        <li><a href="#tab-1">Tab-1</a></li>
        <li><a href="#tab-2">Tab-2</a></li>
        <li><a href="#tab-3">Tab-3</a></li>
    </ul>
    <div id="tab-1">Tab content 1</div>
    <div id="tab-2">Tab content 2</div>
    <div id="tab-3">Tab content 3</div>
</div>

4. Initialize the plugin and we're ready to go. 

$('#defaultTabs').responsiveTabs({
    startCollapsed: 'accordion'
});

5. Include style.css for a basic tab/accordion theme

<link rel="stylesheet" href="path/to/style.css">

Plugin's default options:

Name Default Description
Collapsible accordion 
collapsible: false // The panels are not collapsible
collapsible: true // The panels are collapsible
collapsible: 'tabs' // The panels are only collapsible if the view is currently tab based
collapsible: 'accordion' // The panels are only collapsible if the view is currently accordion based
Start collapsed false 
startCollapsed: false // Do not collapse on start
startCollapsed: true // Start with the panels collapsed
startCollapsed: 'tabs' // Start with the panels collapsed if the view is currently tab based
startCollapsed: 'accordion' // Start with the panels collapsed if the view is currently accordion based
Disabled tabs [] 
disabled: [0,2] // Disables the first and third tab
Active tab null 
active: 1 // Opens the second tab on load
Accordion Tab HTML element '<div></div>' 
accordionTabElement: '<div></div>'
Set hash false 
setHash: true
Rotate false 
rotate: false, // The tabs won't auto rotate
rotate: true, // The tabs will auto rotate from the start
Event 'click' 
event: 'click' // (default) The tabs will activate on click
event: 'mouseover' // The tabs will activate on mouseover
etc...
Animation default 
animation: 'fade', // The panels will fade in and out
animation: 'slide', // The panels will slide up and down
Animation Queue false 
animationQueue: false, // (default) disables the queueing of the animations. With this option on, all animations happen at the same time
animationQueue: true, // enables the queueing of the animations. With this option on, animations wait for each other
animationQueue: 'tabs', // enables the queueing of the animations for the tabs state only
animationQueue: 'accordion', // enables the queueing of the animations for the accordion state only
Animation Duration 500 
duration: 500, // (default) Sets the animation duration to 500
Scroll to Accordion panel false 
scrollToAccordion: false, // (default) disables the auto scrolling to the accordion panel
scrollToAccordion: true, // enables the auto scrolling to the accordion panel
Scroll To Accordion On Load true 
scrollToAccordionOnLoad: true, // (default) enables scrolling to accordion on load
scrollToAccordionOnLoad: false, // disables scrolling to accordion on load
Scroll To Accordion Offset false 
scrollToAccordionOffset: false, // (default) disables the auto scrolling to the accordion panel
scrollToAccordionOffset: true, // enables the auto scrolling to the accordion panel
Navigation container '' 
navigationContainer: '.some-css-selector'

Click

This callback is called after a tab is clicked, regardless of whether it's disabled

Arguments

click: function(event, tab){},

Activate

This callback is called after a tab is selected

Arguments

activate: function(event, tab){},

Deactivate

This callback is called after a tab is deactivated

Arguments

deactivate: function(event, tab){},

Load

This callback is called after the plugin has been loaded

Arguments

load: function(event, firstTab){},

Activate State

This callback is called after the plugin switches from state (Tab view / Accordion view)

activateState: function(){}

Default example

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

HTML structure

<div id="defaultTabs">
    <ul>
        <li><a href="#tab-1">Tab-1</a></li>
        <li><a href="#tab-2">Tab-2</a></li>
        <li><a href="#tab-3">Tab-3</a></li>
    </ul>
    <div id="tab-1">Tab content 1</div>
    <div id="tab-2">Tab content 2</div>
    <div id="tab-3">Tab content 3</div>
</div>

Script

$('#defaultTabs').responsiveTabs();

Auto rotate tabs

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.

HTML structure

<div id="autoRotateTabs">
  <ul>
    <li><a href="#tab-4">Tab-1</a></li>
    <li><a href="#tab-5">Tab-2</a></li>
    <li><a href="#tab-6">Tab-3</a></li>
  </ul>
  <div id="tab-4">Tab content 1</div>
  <div id="tab-5">Tab content 2</div>
  <div id="tab-6">Tab content 3</div>
</div>

Script

$('#autoRotateTabs').responsiveTabs({
   rotate: true,
   animation: 'slide'
});