jQuery Plugin To Create Vertical Tabs - Tabs.js

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:

• Building An Vertical Tabs Widget using jQuery and Bootstrap 3

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.