Responsive Cross-Platform Tabs Plugin For jQuery - easyResponsiveTabs
File Size: | Unknown |
---|---|
Views Total: | 9125 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

easyResponsiveTabs is a jQuery plugin used to create fully responsive tabs system that works perfectly on most popular platforms: desktop, mobile and tablet.
Key features:
- Supports both vertical and horizontal layout.
- Supports nested tabs.
- Auto transforms the tabs into an accordion on small screen devices.
- Hashtag and History API supported.
- Easy to customize and stylize.
- Cross browser and cross platform.
How to use it:
1. Load the style sheet easy-responsive-tabs.css
in the head
and the script jquery.easyResponsiveTabs.js
at the bottom of the document.
<link href="src/easy-responsive-tabs.css" rel="stylesheet"> ... <script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="src/jquery.easyResponsiveTabs.js"></script>
2. The basic Html structure for the tabs system.
<div id="demo"> <ul class="resp-tabs-list"> <li> Tab 1 </li> <li> Tab 2 </li> <li> Tab 3 </li> </ul> <div class="resp-tabs-container"> <div> Tabbed Content 1 </div> <div> Tabbed Content 2 </div> <div> Tabbed Content 3 </div> </div> </div>
3. Initialize the tabs plugin as follow.
$('#demo').easyResponsiveTabs();
4. Here are default plugin options that can be passed during initialization to customize your tabs.
$('#demo').easyResponsiveTabs({ // default, vertical, accordion type: 'default', // dynamic or static width width: 'auto', // fit within a container fit: true, // close accordion panels on start closed: false, // The tab groups identifier tabidentify: '', // background color for active tabs activetab_bg: 'white', // background color for inactive tabs inactive_bg: '#F5F5F5', // border color for active tabs active_border_color: '#c1c1c1', // border color for active tabs active_content_border_color: '#c1c1c1', // callback activate: function () { } });
This awesome jQuery plugin is developed by WerkintJs. For more Advanced Usages, please check the demo page or visit the official website.