Lightweight jQuery Responsive Tabs & Accordion Plugin - Responsive Tabs
File Size: | 83.7 KB |
---|---|
Views Total: | 46944 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Responsive Tabs is a lightweight and simple jQuery plugin for responsive tabbed interface that will transform to an accordion on window size change.
Installation:
# NPM $ npm install responsive-tabs --save # Bower $ bower install responsive-tabs --save
Basic Usage:
1. Include jQuery library and jQuery Responsive Tabs Plugin on the web page
<script src="/path/to/cdn/jquery.min.js"></script> <script src="/path/to/cdn/jquery.responsiveTabs.js"></script>
2. Include required css file to style the plugin
<link rel="stylesheet" href="css/responsive-tabs.css" />
3. Create the html for the tab navigation & tabbed content.
<div id="horizontalTab"> <ul> <li><a href="#tab-1">Responsive Tab-1</a></li> <li><a href="#tab-2">Responsive Tab-2</a></li> <li><a href="#tab-3">Responsive Tab-3</a></li> </ul> <div id="tab-1"> <p> ... </p> </div> <div id="tab-2"> <p> ... </p> </div> <div id="tab-3"> <p> ... </p> </div> </div>
4. The necessary CSS styles. Copy the following CSS snippets and paste them into your document or directly include the stylesheet responsive-tabs.css
on the page.
.r-tabs .r-tabs-nav { margin: 0; padding: 0; } .r-tabs .r-tabs-tab { display: inline-block; margin: 0; list-style: none; } .r-tabs .r-tabs-panel { padding: 15px; display: none; } .r-tabs .r-tabs-accordion-title { display: none; } .r-tabs .r-tabs-panel.r-tabs-state-active { display: block; } /* Accordion responsive breakpoint */ @media only screen and (max-width: 768px) { .r-tabs .r-tabs-nav { display: none; } .r-tabs .r-tabs-accordion-title { display: block; } }
5. Call the plugin to enable the responsive tabs plugin.
$(function(){ $('#horizontalTab').responsiveTabs({ // Start with the panels collapsed if the view is currently accordion based startCollapsed: 'accordion', // Tabs can be collapsed collapsible: true, // Tabs auto rotate rotate: false }); });
6. All plugin options with default values.
// called after a tab is selected active: null, // specify the event that activates a tab event: 'click', // An array with zero based integers that define the tabs that should be disabled disabled: [], // If set to 'true' the panels are collapsible. // 'tabs', 'accordion', true or false collapsible: 'accordion', // Defines if the first panel on load starts collapsed or not. // 'tabs', 'accordion', true or false startCollapsed: false, // auto rotate the tabs rotate: false, // the setting of a reference to the selected tab in the URL hash. setHash: false, // enables the animation of the panels // 'default', 'fade' or 'slide' animation: 'default', // queues the animation // e.g. true, false, 'accordion', 'tabs' animationQueue: false, // animation duration duration: 500, // makes the height auto adapt to the content fluidHeight: true, // auto scroll to the accordion panel scrollToAccordion: false, // enables scroll to accordion on load scrollToAccordionOnLoad: true, // enables auto scroll to the accordion panel scrollToAccordionOffset: 0, // accordion tab element accordionTabElement: '<div></div>', // selects a different container element for the navigation navigationContainer: '', // called after a tab is clicked click: function(e, tab){}, // An 0 based integer that defines the initial opened tab on load. activate: function(e, tab){}, // called after a tab is deactivated deactivate: function(e, tab){}, // called after the plugin has been loaded load: function(e, firstTab){}, // called after the plugin switches from state activateState: function(){}, // default CSS classes classes: { stateDefault: 'r-tabs-state-default', stateActive: 'r-tabs-state-active', stateDisabled: 'r-tabs-state-disabled', stateExcluded: 'r-tabs-state-excluded', container: 'r-tabs', ul: 'r-tabs-nav', tab: 'r-tabs-tab', anchor: 'r-tabs-anchor', panel: 'r-tabs-panel', accordionTitle: 'r-tabs-accordion-title' }
7. API methods.
// opens tab 3 $('#horizontalTab').responsiveTabs('activate', 2); // closes tab 3 $('#horizontalTab').responsiveTabs('deactivate', 2); // enables tab 3 $('#horizontalTab').responsiveTabs('enable', 2); // disables tab 3 $('#horizontalTab').responsiveTabs('disable', 2); // starts the rotatrion of the tab $('#horizontalTab').responsiveTabs('startRotation', 1000);
8. Event handlers.
$('#horizontalTab').on('tabs-load', function(e){ // do something }) $('#horizontalTab').on('tabs-activate', function(e, activeTab){ // do something }) $('#horizontalTab').on('tabs-deactivate', function(e, deactiveTab){ // do something }) $('#horizontalTab').on('tabs-activate-state', function(e, oldState, newState){ // do something })
Changelogs:
2019-11-29
- Updated API.
- Updated Doc
v1.6.3 (2017-10-29)
- Update
v1.6.2 (2016-11-09)
- Fix calling equaliseHeights() on windows resize
- Fix/ie pushstate
v1.6.1 (2016-08-15)
- Refactored click callback to match the plugin structure
v1.6.0 (2016-02-16)
- update.
v1.5.2 (2015-12-11)
- update.
v1.4.5 (2015-05-04)
- Removed unused event object
v1.4.4 (2015-04-24)
- Removed unused event object
v1.4.2 (2014-12-18)
- Update.
v1.4.0 (2014-08-03)
- Update.
v1.3.5 (2014-06-11)
- Added tab object as an arg to the animate callback
v1.3.4 (2014-05-28)
- update.
v1.3.3 (2014-04-01)
- update.
v1.3.1 (2014-03-28)
- Added classes and css for accordion state
v1.3.0 (2014-03-27)
- Added disabled setting
- Improved the demo a bit
v1.2.0 (2014-02-06)
- Added 'active' option
v1.1.2 (2014-01-15)
- Fixed default animation bug
v1.1.1 (2013-11-15)
- Added Tabs collapsibility based on the state.
v1.1.0 (2013-11-01)
- Added animation
v1.0.2 (2013-08-19)
- Added the setHash option
This awesome jQuery plugin is developed by jellekralt. For more Advanced Usages, please check the demo page or visit the official website.