Easy Responsive Tab/Accordion Control Plugin For jQuery

An easy responsive jQuery tabs/accordion plugin that acts like a horizontal/horizontal tabs control on large screen devices and acts like a vertical accordion list when the screen size reaches a media query breakpoint.

How to use it:

1. Place the easy-responsive-tabs.css in the header and the easy-responsive-tabs.js at the bottom of the web page, but after the jQuery library.

<link rel="stylesheet" href="easy-responsive-tabs.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="easy-responsive-tabs.js"></script>

2. Create a normal horizontal tab control as follow.

<div id="horizontalTab">
  <ul class="resp-tabs-list">
    <li>Tab-1</li>
    <li>Tab-2</li>
    <li>Tab-3</li>
  </ul>
  <div class="resp-tabs-container">
    <div>
      <p>Section-1</p>
    </div>
    <div>
      <p>Section-2</p>
    </div>
    <div>
      <p>Section-3</p>
    </div>
  </div>
</div>

3. Call the function on the parent element and the plugin will convert the tab control into an accordion list when the window is resized to be smaller than 769px.

$('#horizontalTab').easyResponsiveTabs({

//Types: default, vertical, accordion     
type: 'default',   

//auto or any width like 600px
width: 'auto', 

// 100% fit in a container
fit: true,   

// Start closed if in accordion view
closed: 'accordion', 

// Callback function if tab is switched
activate: function(){}

});

4. Open the easy-responsive-tabs.css and change the breakpoint to set the accordion, when screen resolution changed.

@media only screen and (max-width: 768px) {

ul.resp-tabs-list { display: none; }

h2.resp-accordion { display: block; }

.resp-vtabs .resp-tab-content { border: 1px solid #C1C1C1; }

.resp-vtabs .resp-tabs-container {
  border: none;
  float: none;
  width: 100%;
  min-height: initial;
  clear: none;
}

.resp-accordion-closed { display: none !important; }

.resp-vtabs .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; }
}

---

This awesome jQuery plugin is developed by ntluan. For more Advanced Usages, please check the demo page or visit the official website.