jQuery Responsive Vertical Tabs to Accordion

Category: Accordion | December 22, 2019
jQuery Responsive Vertical Tabs to Accordion
Author: samsono
Official Page: Go to Website
Last Update: December 22, 2019
License: MIT

The “Easy responsive tabs” is a super lightweight jQuery plugin to create mobile-friendly vertical tabs to the accordion. It supports multiple sets of tabs on the same page and you can link directly to the specified tab.

The plugin is lightweight and works well with most of the browsers. It also supports a wide range of devices such as web, tablets, mobile (IPad & iPhone).

Furthermore, the plugin adapts the screen size and changes its form accordingly. By using this plugin you can easily re-arrange long content into beautifully tabs to make it look good and user-friendly.

How to Create Responsive Vertical Tabs

There are just two files that you need to load into your webpage to start implementing responsive tabs. Let’s load the jQuery and JavaScript file into an HTML document.

<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<!-- easyResponsiveTabs Js -->
<script src="js/easyResponsiveTabs.js"></script>

Nest step to create the HTML structure for the Tabs. We will create a div element with a unique ID and then define the unordered list element inside it to define the tabs.

As for tabs content, you need to create another define within the container named “resp-tabs-container” and place a div with your content.

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

Similar, If you want to create the nested tabs then our structure will be slightly different.

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

Finally, initialize the plugin in the jQuery document ready function (with default options).

$(document).ready(function(){
   $('#demoTab').easyResponsiveTabs();
});

Configuration Options for Vertical Tabs to Accordion

Here are the plugin advanced configuration options to customize the jQuery responsive vertical tabs the way of working of the plugin.

Option Description, Default, Type
type You can define the type of layout. Types: default, vertical, accordion

$(document).ready(function(){
    type: 'default',
});
width The width element allows you to set the custom size. width: ‘auto’, //auto or any custom width

$(document).ready(function(){
    width: 'auto',
});
fit True/False the fits element to make it 100% fits in a container.

$(document).ready(function(){
    fit: 'true',
});
closed Close the panels on start, the options ‘accordion’ and ‘tabs’ keep them closed in their respective view types: closed: false,

$(document).ready(function(){
    types: 'closed',
});
activate The callback function gets called if the tab is switched. activate: function() {},

$(document).ready(function(){
   activate: function() {},
});
tabidentify The tab group identifier *This should be a unique name for each tab group and should not be defined in any styling or CSS file. tabidentify: ‘tab_identifier_child’,

$(document).ready(function(){
   tabidentify: 'tab_identifier_child',
});
activetab_bg Set the background color for active tabs in this group.

$(document).ready(function(){
   activetab_bg: '#B5AC5F',
});
activetab_bg Set the background color for active tabs in this group.

$(document).ready(function(){
   activetab_bg: '#B5AC5F',
});
inactive_bg Similar you can set the background color for inactive tabs in this group.

$(document).ready(function(){
   inactive_bg: '#E0D78C',
});
active_border_color Set the border color for active tabs heads in this group

$(document).ready(function(){
   active_border_color: '#ff0',
});
active_content_border_color Border color for active tabs content in this group so that it matches the tab head border

$(document).ready(function(){
   active_content_border_color: '#9C905C',
});

You May Also Like

Leave a Comment