Responsive Cross-Platform Tabs Plugin For jQuery - easyResponsiveTabs

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.