Responsive jQuery Vertical & Horizontal Tabs Plugin - Tab Module
File Size: | 6.84 KB |
---|---|
Views Total: | 35737 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tab Module is a simple tiny jQuery tabs plugin to create a responsive, flexible tabs interface with support for vertical or horizontal layouts.
How to use it:
1. Load the jQuery Tab Module plugin and other required resources into your document.
<link rel="stylesheet" href="tabModule.css"> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <script src="tabModule.js"></script>
2. Create an vertical tabs interface following the Html structure shown below. To create a horizontal one, just replace the tab-vert
CSS class with tab-horiz.
<div class="tab tab-vert"> <ul class="tab-legend"> <li class="active">Tab 1</li> <li>Tab 2</li> <li>Tab 3</li> <li>Tab 4</li> </ul> <ul class="tab-content"> <li> <!--TAB CONTENT--> <h4>Content</h4> </li> <li> <!--TAB CONTENT--> <h4>Content</h4> </li> <li> <!--TAB CONTENT--> <h4>Content</h4> </li> <li> <!--TAB CONTENT--> <h4>Content</h4> </li> </ul> </div>
3. Initialize the plugin on document ready and you're done.
$(document).ready(function(){ tabModule.init(); });
This awesome jQuery plugin is developed by mkamla. For more Advanced Usages, please check the demo page or visit the official website.