Easy Responsive Tabs to Accordion
Easy responsive tabs - is a lightweight jQuery plugin which optimizes normal horizontal or vertical tabs to accordion on multi devices like: web, tablets, Mobile (IPad & IPhone). This plugin adapts the screen size and changes its form accordingly.
Features
- Horizontal / Vertical Tabs to Accordion
- Tabs and accordion are created entirely with jQuery
- Supports multiple sets of tabs on same page
- Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
- Multi device support (Web, Tablets & Mobile)
- Link directly to specified tab (works with multiple instances)
- Maintains state of tabs when navigating away from page and then returning using back or forward (if browser supports the History API)
- Nested tabs
Demo
http://webthemez.com/demo/easy-responsive-tabs/Index.html
How to use
=> Included jQuery file (minimum jQuery-1.5.1.min.js) => Included easyResponsiveTabs.js => Include responsive-tabs.css => Here is the Markup for Tabs structure (non nested tabs):
<div id="demoTab"> <ul class="resp-tabs-list"> <li> .... </li> <li> .... </li> <li> .... </li> </ul> <div class="resp-tabs-container"> <div> ....... </div> <div> ....... </div> <div> ....... </div> </div> </div> => Here is the Markup for Tabs structure (nested tabs):
<div id="ParentTab"> <ul class="resp-tabs-list tab_identifier_parent"> <li> .... </li> <li> .... </li> <li> .... </li> </ul> <div class="resp-tabs-container tab_identifier_parent"> <div> <p> <div id="ChildTab"> <ul class="resp-tabs-list tab_identifier_child"> <li> .... </li> <li> .... </li> <li> .... </li> </ul> <div class="resp-tabs-container tab_identifier_child"> <div> ....... </div> <div> ....... </div> <div> ....... </div> </div> </div> </p> </div> <div> ....... </div> <div> ....... </div> </div> </div> => Call the easyResponsiveTabs function:
$('#demoTab').easyResponsiveTabs(); => With optional parameters:
$("#demoTab").easyResponsiveTabs({ type: 'default', //Types: default, vertical, accordion width: 'auto', //auto or any custom width fit: true, // 100% fits in a container closed: false, // Close the panels on start, the options 'accordion' and 'tabs' keep them closed in there respective view types activate: function() {}, // Callback function, gets called if tab is switched tabidentify: 'tab_identifier_child', // The tab groups identifier *This should be a unique name for each tab group and should not be defined in any styling or css file. activetab_bg: '#B5AC5F', // background color for active tabs in this group inactive_bg: '#E0D78C', // background color for inactive tabs in this group active_border_color: '#9C905C', // border color for active tabs heads in this group active_content_border_color: '#9C905C' // border color for active tabs contect in this group so that it matches the tab head border }); => Linking to Tabs:
http://yoursite.com/tabs.html#{TAB ID}{TAB NUM} http://yoursite.com/tabs.html#demoTab2 Multiple Instances: http://yoursite.com/tabs.html#{TAB ID 1}{TAB NUM}|{TAB ID 2}{TAB NUM} http://yoursite.com/tabs.html#demoTab2|demoTwo3 For any support
Samson Email: [email protected]
