jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.
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 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)
- Tabs can be disabled
- The tabs are controllable with API methods
- 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:
=> Use this jQuery function to enable responsive tabs on the selected element:
npm install responsive-tabs
bower install responsive-tabs
The following options are available:
If set to 'true' the panels are collapsible. The values 'tabs' and 'accordion' can be used to make the panels collapsible in a specific view/state. If a tab is active and you select it again, the panel will collapse.
collapsible: false // The panels are not collapsiblecollapsible: true // The panels are collapsiblecollapsible: 'tabs' // The panels are only collapsible if the view is currently tab basedcollapsible: 'accordion' // The panels are only collapsible if the view is currently accordion based
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 startstartCollapsed: true // Start with the panels collapsedstartCollapsed: 'tabs' // Start with the panels collapsed if the view is currently tab basedstartCollapsed: 'accordion' // Start with the panels collapsed if the view is currently accordion based
An array with zero based integers that define the tabs that should be disabled
disabled: 02 // Disables the first and third tab
An 0 based integer that defines the initial opened tab on load.
active: 1 // Opens the second tab on load
A boolean that can be used to enable and disable the setting of a reference to the selected tab in the URL hash. If set to 'true', the selecting of a new tab will set the reference to that tab in the URL hash.
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 rotaterotate: true // The tabs will auto rotate from the start
This option can be used to specify the event that activates a tab. For instance: 'mouseover'. Defaults to 'click'
event: 'click' // (default) The tabs will activate on clickevent: 'mouseover' // The tabs will activate on mouseoveretc
This option enables the animation of the panels. By default the panels will just show and hide, this option can be used to make the panels slide up and down and fade in and out.
animation: 'fade' // The panels will fade in and outanimation: 'slide' // The panels will slide up and down
This callback is called after a tab is selected
- event: Activate event
- tab: Activated tab object
This callback is called after a tab is deactivated
- event: Deactivate event
- tab: Deactivated tab object
This callback is called after the plugin has been loaded
- event: Load event
- tab: First tab object
This callback is called after the plugin switches from state (Tab view / Accordion view)
The following methods are available:
This method activates/opens a tab by using a zero based tab reference
$'#responsiveTabsDemo'responsiveTabs'activate' 1; // This would open the second tab
This method deactivates/closes a tab by using a zero based tab reference
$'#responsiveTabsDemo'responsiveTabs'deactivate' 1; // This would close the second tab
This method start the rotation of the tabs. You can use the first argument to define the speed.
$'#responsiveTabsDemo'responsiveTabs'startRotation' 1000; // This would open the second tab
The following events are emitted on the element the tabs are initialised on (the container):
This event is triggered when the tabs plugin has finished loading
This event is triggered when a tab is activated
- Activated tab object
This event is triggered when a tab is deactivated
- Deactivated tab object
This event is triggered when the state of the plugin changes
- State object
- Old state
- New state
I am planning on adding these options in the future:
- Ajax panels
- Keyboard interaction
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)
If you have any questions, problems or suggestions, feel free to submit a ticket! Also, pull requests with improvements, new features or other great stuff are always very welcome.
If you enjoy this plugin and like to make a donation you can use the button below :).