This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. Check out a demo at http://jellekralt.github.io/Responsive-Tabs/demo.html
- 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)
=> Requires jQuery (minimaly jQuery 1.7.0) => Include jquery.responsiveTabs.js => Include responsive-tabs.css for the basic Tabs to Accordion switching => Include style.css for a basic tab/accordion theme
=> Use this HTML markup:
<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>
=> Use this jQuery function to enable responsive tabs on the selected element:
$('#responsiveTabsDemo').responsiveTabs({
startCollapsed: 'accordion'
});
The following options are available:
If set to 'true' the panels are collapsible. If a tab is active and you select it again, the panel will collapse.
collapsible: false, // The panels are not collapsible
collapsible: true, // The panels are collapsible
This option defines if the first panel on load starts collapsed or not. With the values 'tabs' and 'accordion' you can specify in which view the tabs are supposed to start collapsed.
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
This option can be used to auto rotate the tabs. The tabs will stop rotating when a tab is selected.
rotate: false, // The tabs won't auto rotate
rotate: true, // The tabs will auto rotate from the start
This callback is called after a tab is selected
activate: function(){},
This callback is called after a tab is deactivated
deactivate: function(){},
This callback is called after the plugin has been loaded
load: function(){},
This callback is called after the plugin switches from state (Tab view / Accordion view)
activateState: function(){}
I am planning on adding these options in the future:
- Transitions
- Ajax panels
- Tabs that can be disabled
- Keyboard interaction
- Selection event type (for instance, mouseover)
If you have good ideas / tips about options / functionality, let me know!
The idea for this plugin is based on 'Easy Responsive Tabs to Accordion' by samsono (github.com/samsono)
https://github.com/samsono/Easy-Responsive-Tabs-to-Accordion
If you have any questions, feel free to contact me.
Jelle Kralt