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.