jQuery Plugin To Create Vertical Tabs - Tabs.js
File Size: | 33.1 KB |
---|---|
Views Total: | 6460 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Tabs.js is a lightweight jQuery plugin used to create a simple tabbed interface that arranges tabs in a vertical rather than horizontal fashion.
See also:
How to use it:
1. Download and include the tabs.js script after you have jQuery library installed.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> <script src="js/jquery.tabs.js"></script>
2. Create tabbed panels and a list of vertical tabs as follow:
<div class="tabs"> <ul> <li><a href="#one">One</a></li> <li><a href="#two">Two</a></li> <li><a href="#three" class="active">Three</a></li> <li><a href="#four">Four</a></li> <li><a href="#five">Five</a></li> <li><a href="#six">Six</a></li> </ul> <div id="one" class="tab"> Content 1 </div> <div id="two" class="tab"> Content 2 </div> <div id="three" class="tab"> Content 3 </div> <div id="four" class="tab"> Content 4 </div> <div id="five" class="tab"> Content 5 </div> <div id="six" class="tab"> Content 6 </div> </div>
3. Initialize the plugin on document ready.
$(document).ready(function(){ $('.tabs').tabs(); });
4. Style the tabbed interface whatever you like.
$(document).ready(function(){ $('.tabs').tabs(); });
This awesome jQuery plugin is developed by iuzhakov. For more Advanced Usages, please check the demo page or visit the official website.