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 action accordingly.
jQuery-1.5.1.min.js
)easyResponsiveTabs.js
responsive-tabs.css
Here is the Markup for Tabs structure (non nested tabs):
#demoTab
ul.resp-tabs-list
li ....
li ....
li ....
.resp-tabs-container
div .......
div .......
div .......
<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):
#ParentTab
ul.resp-tabs-list.tab_identifier_parent
li ....
li ....
li ....
.resp-tabs-container.tab_identifier_parent
div
p
#ChildTab
ul.resp-tabs-list.tab_identifier_child
li ....
li ....
li ....
.resp-tabs-container.tab_identifier_child
div .......
div .......
div .......
div .......
div .......
<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
Credits to Samson Onna