Simple jQuery Responsive Tabs Interface Plugin - jQueryTab
File Size: | 10.1 KB |
---|---|
Views Total: | 36073 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Yet another jQuery tabs plugin for creating responsive tabbed panels with many options and CSS3 transition animations support.
Features:
- Automatically converts the tabs into the accordion interface in smaller devices like iPad, iPhone, etc...
- Remembers last active tab using cookie.
- Keyboard navigation.
- Supports browser history API.
- Open on click or hover.
- 4 tabs transitions: fade|flip|scaleUp|slideLeft.
- 2 accordion transitions: normal and slide.
How to use it:
1. Include jQuery javascript library on the web page.
<script src="/path/to/cdn/jquery.slim.min.js"></script>
2. Include the jQueryTab plugin's CSS and JavaScript on the page.
<!-- Core Stylesheet --> <link rel="stylesheet" href="jQueryTab.css" /> <!-- CSS3 Animations --> <link rel="stylesheet" href="animation.css" /> <!-- Main JavaScript --> <script src="js/jQueryTab.js"></script>
3. Create tabs and tabbed content following the html structure as shown below:
<div class="tabs-demo"> <ul class="tabs"> <li><a href="#tab1">Tab1</a></li> <li><a href="#tab2">Tab2</a></li> <li><a href="#tab3">Tab3</a></li> <li><a href="#tab4">Tab4</a></li> </ul> <section class="tab_content" id="tab1"> <p> Tabbed Conternt 1</p> </section> <section class="tab_content" id="tab2"> <p>Tabbed Conternt 2</p> </section> <section class="tab_content" id="tab3"> <p>Tabbed Conternt 3</p> </section> <section class="tab_content" id="tab4"> <p>Tabbed Conternt 4</p> </section> </div>
4. Initialize the plugin on the top container and done.
$('.tabs-demo').jQueryTab({ // options here });
5. All available options to customize the tabs.
$('.tabs-demo').jQueryTab({ // class of the tabs tabClass:'tabs', // class of the header of accordion on smaller screens accordionClass:'accordion_tabs', // class of content wrapper contentWrapperClass:'tab_content_wrapper', // class of container contentClass:'tab_content', // name of the class used for active tab activeClass:'active', // enable accordion on smaller screens responsive:true, // the breakpoint responsiveBelow:600, // allow all tabs to collapse on accordions collapsible:true, // remember last active tab using cookie useCookie: true, // open tab on hover openOnhover: false, // use the history api useHistory: true, // use keyboard for navigation keyboardNavigation: true, // position of tab - top|bottom tabPosition: 'top', // tab to open initially; start count at 1 not 0 initialTab: 1, // name of the cookie set to remember last active tab cookieName: 'active-tab', // when it expires in days or standard UTC time cookieExpires: 365, // path on which cookie is accessible cookiePath: '', // domain of the cookie cookieDomain:'', // enable secure cookie - requires https connection to transfer cookieSecure: false, // fade|flip|scaleUp|slideLeft tabInTransition: 'fadeIn', tabOutTransition: 'fadeOut', // transitions to use - normal or slide accordionTransition: 'slide', // time for animation IN (1000 = 1s) accordionIntime:500, // time for animation OUT (1000 = 1s) accordionOutTime:400, // function to call before tab is opened before: function(){}, // function to call after tab is opened after: function(){} });
Changelog:
2022-03-30
- Update to v2
- Bugfix
v2.0 (2015-11-21)
- Update jQueryTab.js
v2.0 (2014-03-20)
- added version 2 with CSS3 transitions
- added keyboard navigation and tab postion switching
v1.4 (2014-01-31)
- Several bug fixes and code optimization
This awesome jQuery plugin is developed by dharmapoudel. For more Advanced Usages, please check the demo page or visit the official website.