Responsive Tabs

This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.

 

Features

• Tabs transform to accordion based on breakpoint
• Uses javascript / jQuery for the technical tab switching (class based)
• Uses CSS for the desktop/tablet/mobile view
• Has callback events for the tab events
• Tabs can be opened with URL hashes
• Tabs can auto rotate
• Tabs can be collapsed (optional)
• Tabs can start collapsed based on the view (optional)
• Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
• Multiple device support (Web, Tablet, Mobile, etc)

<div id="responsiveTabsDemo">
    <ul>
        <li><a href="#tab-1"> .... </a></li>
        <li><a href="#tab-2"> .... </a></li>
        <li><a href="#tab-3"> .... </a></li>
    </ul>

    <div id="tab-1"> ....... </div>
    <div id="tab-2"> ....... </div>
    <div id="tab-3"> ....... </div>
</div>

$('#responsiveTabsDemo').responsiveTabs({
    startCollapsed: '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

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

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

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

activate: function(){},

deactivate: function(){},

load: function(){},

activateState: function(){}

$('#responsiveTabsDemo').responsiveTabs('activate', 1); // This would open the second tab

$('#responsiveTabsDemo').responsiveTabs('startRotation', 1000); // This would open the second tab