Responsive Tabs To Accordion jQuery Plugin – Responsive-tabs

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:

• It can be installed with Bower and NPM.
• Lightweight and easy to implement.
• Tabs can be opened with URL hashes.
• Uses CSS for the desktop/tablet/mobile view.
• Supported on all major browsers and devices.
• Tabs can be disabled.
• Tabs can auto rotate.

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:

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

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: [0,2] // Disables the first and third tab

active: 1 // Opens the second tab on load

accordionTabElement: '<div></div>'

setHash: true

rotate: false, // The tabs won't auto rotate
rotate: true, // The tabs will auto rotate from the start

event: 'click' // (default) The tabs will activate on click
event: 'mouseover' // The tabs will activate on mouseover
etc...

animation: 'fade', // The panels will fade in and out
animation: 'slide', // The panels will slide up and down

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

duration: 500, // (default) Sets the animation duration to 500

scrollToAccordion: false, // (default) disables the auto scrolling to the accordion panel
scrollToAccordion: true, // enables the auto scrolling to the accordion panel

scrollToAccordionOnLoad: true, // (default) enables scrolling to accordion on load
scrollToAccordionOnLoad: false, // disables scrolling to accordion on load

scrollToAccordionOffset: false, // (default) disables the auto scrolling to the accordion panel
scrollToAccordionOffset: true, // enables the auto scrolling to the accordion panel

navigationContainer: '.some-css-selector'

Click

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

Arguments

• event: Clicked event
• tab: Clicked tab object

click: function(event, tab){},

Activate

This callback is called after a tab is selected

Arguments

• event: Activate event
• tab: Activated tab object

activate: function(event, tab){},

Deactivate

This callback is called after a tab is deactivated

Arguments

• event: Deactivate event
• tab: Deactivated tab object

deactivate: function(event, tab){},

Load

This callback is called after the plugin has been loaded

Arguments

• event: Load event
• tab: First tab object

load: function(event, firstTab){},

Activate State

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

activateState: function(){}