Easy Responsive Tabs to Accordion

samuel Accordion 539

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 action 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

 

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
Related Post

AngularJS multi-level accordion Allows for a nested structure Works with (or without) ng-repeat Allows multiple sections to be open at once Read more

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery Read more

An Accordion that doesn’t break your content. jQuery plugin that lets you create beautiful responsive Accordion dropdown content.

Grid Accordion is a fully responsive and touch-enabled WordPress plugin that combines the functionality of a grid with that of Read more

This article explains how to create vertical navigation menus without jquery or javascript. Yes, we are going to build vertical Read more

Today’s resource is a handy accordion menu with support for groups/subitems. It works with CSS only, using the :checked pseudo-class Read more

Navgoco is a simple JQuery plugin which turns a nested unordered list of links into a beautiful vertical multi-level slide Read more

A simple, user-friendly and lightweight jQuery accordion plugin with smooth animations powered by CSS3 transitions.It was based on the Minimal Read more

Go