Tool Bar
Webriq logo
Notifications

Easy Responsive Tabs to Accordion

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.

Getting Started

Features

  1. Horizontal / Vertical Tabs to Accordion
  2. Tabs and accordion are created entirely with jQuery
  3. Supports multiple sets of tabs on same page
  4. Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
  5. Multi device support (Web, Tablets & Mobile)
  6. Link directly to specified tab (works with multiple instances)
  7. Maintains state of tabs when navigating away from page and then returning using back or forward (if browser supports the History API)
  8. Nested tabs

How to use

  1. Include jQuery file (minimum jQuery-1.5.1.min.js)
  2. Include easyResponsiveTabs.js
  3. Include 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>

Nested Tabs

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>

Javascript

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