Accordion Like Content Tabs Plugin with jQuery - Easy Responsive Tabs
File Size: | 73.5 KB |
---|---|
Views Total: | 21220 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Easy Responsive Tabs is a simple jQuery plugin for quickly creating content Tabs which allow you organize larger groups of content into a tab interface. It will automatically turn the content Tabs into a content accordion for mobile devices. You can change the media query break point through CSS to set the accordion, when screen resolution changed.
Features:
- Supports all major browsers (IE7+, Chorme, Firefox, etc)
- Responsive and mobile-friendly
- Vertical or horizontal tabs supported
How to use it:
1. Include jQuery library and Easy Responsive Tabs plugin on your web page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
2. Create the html for the vertical content tabs
<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>...</p> </div> <div> <p>...</p> </div> <div> <p>...</p> </div> </div> </div>
3. Include
body { margin: 0px; padding: 0px; background: #f5f5f5; font-family: 'Segoe UI'; } ul.resp-tabs-list, p { margin: 0px; padding: 0px; } .resp-tabs-list li { font-weight: 600; font-size: 13px; display: inline-block; padding: 13px 15px; margin: 0; list-style: none; cursor: pointer; float: left; } .resp-tabs-container { padding: 0px; background-color: #fff; clear: left; } h2.resp-accordion { cursor: pointer; padding: 5px; display: none; } .resp-tab-content { display: none; padding: 15px; } .resp-tab-active { border: 1px solid #c1c1c1; border-bottom: none; margin-bottom: -1px !important; padding: 12px 14px 14px 14px !important; } .resp-tab-active { border-bottom: none; background-color: #fff; } .resp-content-active, .resp-accordion-active { display: block; } .resp-tab-content { border: 1px solid #c1c1c1; } h2.resp-accordion { font-size: 13px; border: 1px solid #c1c1c1; border-top: 0px solid #c1c1c1; margin: 0px; padding: 10px 15px; } h2.resp-tab-active { border-bottom: 0px solid #c1c1c1 !important; margin-bottom: 0px !important; padding: 10px 15px !important; } h2.resp-tab-title:last-child { border-bottom: 12px solid #c1c1c1 !important; background: blue; } .resp-arrow { width: 0; height: 0; float: right; margin-top: 3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 12px solid #c1c1c1; } h2.resp-tab-active span.resp-arrow { border: none; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #9B9797; } /*-----------Accordion styles-----------*/ h2.resp-tab-active { background: #DBDBDB !important; } .resp-easy-accordion h2.resp-accordion { display: block; } .resp-easy-accordion .resp-tab-content { border: 1px solid #c1c1c1; } .resp-easy-accordion .resp-tab-content:last-child { border-bottom: 1px solid #c1c1c1 !important; } .resp-jfit { width: 100%; margin: 0px; } .resp-tab-content-active { display: block; } h2.resp-accordion:first-child { border-top: 1px solid #c1c1c1 !important; } /*Here your can 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; } }
4. Call the plugin with options
$(document).ready(function () { $('#horizontalTab').easyResponsiveTabs({ // Types: default, vertical, accordion type: 'default', //auto or any width like 600px width: 'auto', // 100% fit in a container fit: true, // Close the panels on start, // the options 'accordion' and 'tabs' keep them closed in there respective view types closed: false, // The tab groups identifier tabidentify: '', // background color for active tabs in this group activetab_bg: 'white', // background color for inactive tabs in this group inactive_bg: '#F5F5F5', // border color for active tabs heads in this group active_border_color: '#c1c1c1', // border color for active tabs contect in this group // so that it matches the tab head border active_content_border_color: '#c1c1c1', activate: function () {} }); });
Change log:
2014-12-24
- update.
This awesome jQuery plugin is developed by samsono. For more Advanced Usages, please check the demo page or visit the official website.