jQuery Plugin To Create Vertical Tabs - Tabs.js

File Size: 33.1 KB
Views Total: 6527
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

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">
    <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>
  <div id="one" class="tab">
    Content 1
  <div id="two" class="tab">
    Content 2
  <div id="three" class="tab">
    Content 3
  <div id="four" class="tab">
    Content 4
  <div id="five" class="tab">
   Content 5
  <div id="six" class="tab">
    Content 6

3. Initialize the plugin on document ready.


4. Style the tabbed interface whatever you like.


This awesome jQuery plugin is developed by iuzhakov. For more Advanced Usages, please check the demo page or visit the official website.