jQuery-mTab

This jQuery plugin provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint

• Tabs transform to accordion based on breakpoint
• Uses CSS for tab switching animation (true/false)
• Uses CSS for the desktop/tablet/mobile view
• Has callback events for the tab events
• Accordion are collapsible
• Set custom active class
• Set default active/open tab
• Tabs can be opened with URL hashes
• Tabs can auto rotate
• Accordion will scroll to respective click scroll top position
• Tabs can be collapsed (optional)
• Tabs can start collapsed based on the view (optional)
• Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
• Multiple device support (Web, Tablet, Mobile, etc)

How to Use

• Requires jQuery (minimaly jQuery 1.9.2)
• Include jquery-mTab-min.js

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

Include mTab-style.css for the basic Tabs to Accordion switching

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

Use this HTML markup:

<div class="sectionTabbing">     <ul class="tabNav">         <li><a href="#tab1"> .... </a></li>         <li><a href="#tab2"> .... </a></li>         <li><a href="#tab3"> .... </a></li>     </ul>         <div class="tabContainer">         <div class="tabContent" id="tab1"> ....... </div>         <div class="tabContent" id="tab2"> ....... </div>         <div class="tabContent" id="tab3"> ....... </div>     </div> </div> 

Use this jQuery function to enable responsive tabs on the selected element:

 // Default Setting $('.sectionTabbing').mTab({      navigation: ".tabNav"     ,container: ".tabContainer",     ,activeTab: 1     ,activeClass: "active"      ,scrollOffset: true     ,accordScreen: 768     ,animation: 700     ,toggleClose: false     ,openWithUrl: false     ,callbackonclick: function() {}      callback: function() {}  });