This time I will share jQuery Plugin and tutorial about Responsive Tabbing with Accordion In Mobile View – mTab, hope it will help you in programming stack.
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.
1 |
<link href="css/mTab-style.css" rel="stylesheet"> |
2. The required markup structure for the tabbed interface.
03 |
<li><a href="#tab1">tab 1</a></li> |
04 |
<li><a href="#tab2">tab 2</a></li> |
05 |
<li><a href="#tab3">tab 3</a></li> |
07 |
<div class="tabContainer"> |
08 |
<div class="tabContent" id="tab1"> |
09 |
<h3>Tab Content 1</h3> |
10 |
<p>More Content Here</p> |
12 |
<div class="tabContent" id="tab2"> |
13 |
<h3>Tab Content 2</h3> |
14 |
<p>More Content Here</p> |
16 |
<div class="tabContent" id="tab3"> |
17 |
<h3>Tab Content 3</h3> |
18 |
<p>More Content Here</p> |
3. Load the latest jQuery library and the jquery-mTab-min.js at the end of the document.
1 |
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script> |
2 |
<script src="js/jquery-mTab-min.js"></script> |
4. Active the plugin with default options.
5. Configuration options.
02 |
navigation: ".tabNav", |
05 |
container: ".tabContainer", |
11 |
activeClass: "active", |
26 |
callbackonclick: function() {}, |
27 |
callback: function() {} |
This awesome jQuery plugin is developed by maulinpandya2006. For more Advanced Usages, please check the demo page or visit the official website.
