jQuery Responsive Vertical Tabs to Accordion

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.

$(document).ready(function(){
    type: 'default',
});

$(document).ready(function(){
    width: 'auto',
});

$(document).ready(function(){
    fit: 'true',
});

$(document).ready(function(){
    types: 'closed',
});

$(document).ready(function(){
   activate: function() {},
});

$(document).ready(function(){
   tabidentify: 'tab_identifier_child',
});

$(document).ready(function(){
   activetab_bg: '#B5AC5F',
});

$(document).ready(function(){
   activetab_bg: '#B5AC5F',
});

$(document).ready(function(){
   inactive_bg: '#E0D78C',
});

$(document).ready(function(){
   active_border_color: '#ff0',
});

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