Easy Responsive Tab/Accordion Control Plugin For jQuery
File Size: | 36.8 KB |
---|---|
Views Total: | 84401 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.