Responsive jQuery Vertical & Horizontal Tabs Plugin - Tab Module

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.