Categories
Plugins

responsive-tabs

  • Post author By
  • Post date

jQuery Responsive Tabs
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/
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)
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)

How to use

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:

$(‘#responsiveTabsDemo’).responsiveTabs({    startCollapsed: ‘accordion’});
Get
Bower
bower install responsive-tabs

NPM
npm install responsive-tabs

CDN
Responsive Tabs is available on jsDelivr
http://www.jsdelivr.com/#!jquery.responsive-tabs

API
The following options are available:
Collapsible
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
Start collapsed
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
Disabled tabs
An array with zero based integers that define the tabs that should be disabled
disabled: [0,2] // Disables the first and third tab
Active tab
An 0 based integer that defines the initial opened tab on load.
active: 1 // Opens the second tab on load
Accordion Tab HTML element
A single HTML element template in which the accordion tab will be wrapped.
accordionTabElement: ‘

‘
Set hash
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.
setHash: true
Rotate
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
Event
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…
Animation
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
You can enable / disable the queueing of the animation by setting the animationQueue option.
animationQueue: false, // (default) disables the queueing of the animations. With this option on, all animations happen at the same timeanimationQueue: true, // enables the queueing of the animations. With this option on, animations wait for each otheranimationQueue: ‘tabs’, // enables the queueing of the animations for the tabs state onlyanimationQueue: ‘accordion’, // enables the queueing of the animations for the accordion state only
You can set the speed of the animation by setting the duration option.
duration: 500, // (default) Sets the animation duration to 500
Scroll to Accordion panel
This options can be used to enable automatic scrolling to the accordion panel that has been opened
scrollToAccordion: false, // (default) disables the auto scrolling to the accordion panelscrollToAccordion: true, // enables the auto scrolling to the accordion panel
Scroll to Accordion panel on load
This option can be used to disabling the scrolling to an accordion panel on load
scrollToAccordionOnLoad: true, // (default) enables scrolling to accordion on loadscrollToAccordionOnLoad: false, // disables scrolling to accordion on load
You can define an offset in pixels for the scroll to accordion panel by setting the scrollToAccordionOffset option.
scrollToAccordionOffset: false, // (default) disables the auto scrolling to the accordion panelscrollToAccordionOffset: true, // enables the auto scrolling to the accordion panel
Navigation container
This option can be used to select a different container element for the navigation