Responsive Tabbing with Accordion In Mobile View - mTab

mTab is a lightweight (~4kb unminified) jQuery plugin to create a responsive tabbed interface that automatically switch between tabs view and accordion view according to a specified breakpoint.

Features:

• Custom active tab.
• Custom open / close animation.
• Allows to open tabs with URL.
• Callback functions.
• Auto scrolls to top position in accordion view.
• Custom breakpoint at which you want to switch between tabs view and accordion view.

How to use it:

1. Load the core style sheet mTab-style.css in the head section of the document.

<link href="css/mTab-style.css" rel="stylesheet">

2. The required markup structure for the tabbed interface.

<div class="tabbing">
  <ul class="tabNav">
    <li><a href="#tab1">tab 1</a></li>
    <li><a href="#tab2">tab 2</a></li>
    <li><a href="#tab3">tab 3</a></li>
  </ul>
  <div class="tabContainer">
    <div class="tabContent" id="tab1">
      <h3>Tab Content 1</h3>
      <p>More Content Here</p>
    </div>
    <div class="tabContent" id="tab2">
      <h3>Tab Content 2</h3>
      <p>More Content Here</p>
    </div>
    <div class="tabContent" id="tab3">
      <h3>Tab Content 3</h3>
      <p>More Content Here</p>
    </div>
  </div>
</div>

3. Load the latest jQuery library and the jquery-mTab-min.js at the end of the document.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/jquery-mTab-min.js"></script>

4. Active the plugin with default options.

$('.tabbing').mTab();

5. Configuration options.

// CSS selector for navigtation
navigation: ".tabNav",

// CSS selector for container
container: ".tabContainer",

// active tab on page load
activeTab: 1,

// CSS class for active tab
activeClass: "active",

// scroll offset
scrollOffset: true,

// breakpoint in pixels
accordScreen: 768,

// enable animation
animation: false,

// open tabs with URL hashes
openWithUrl: false,

// callback functions
callbackonclick: function() {},
callback: function() {}

---

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