Handy Animated Tab Plugins With jQuery - tabs.js

A lightweight, flexible jQuery tabs plugin that automatically creates tabs from an HTML unordered list, which link to block elements on the webpage.

How to use it:

1. Create an unordered list and link the list items to the tab panels using HTML5 data-panel-name attributes as follows:

<div class="tab-panels">
  <ul class="tabs">
    <li data-panel-name="panel1" class="active">panel 1</li>
    <li data-panel-name="panel2">panel 2</li>
    <li data-panel-name="panel3">panel 3</li>
    <li data-panel-name="panel4">panel 4</li>
  </ul>

  <div id="panel1" class="panel active">
    Content for Panel 1 here
  </div>

  <div id="panel2" class="panel">
    Content for Panel 2 here
  </div>

  <div id="panel3" class="panel">
    Content for Panel 3 here
  </div>

  <div id="panel4" class="panel">
    Content for Panel 4 here
  </div>
</div>

2. The sample CSS styles for the tabs interface.

.tab-panels ul {
  margin: 0;
  padding: 0;
}

.tab-panels ul li {
  list-style-type: none;
  display: inline-block;
  background: #999;
  margin: 0;
  padding: 3px 10px;
  border-radius: 10px 10px 0 0;
  color: #fff;
  font-weight: 200;
  cursor: pointer;
}

.tab-panels ul li:hover {
  color: #fff;
  background: #666;
}

.tab-panels ul li.active {
  color: #fff;
  background: #666;
}

.tab-panels .panel {
  display: none;
  background: #c9c9c9;
  padding: 30px;
  border-radius: 0 0 10px 10px;
}

.tab-panels .panel.active { display: block; }

3. Include both jQuery library and the jQuery tabs.js script at the end of the webpage. That's it.

<script src="jquery.min.js"></script>
<script src="js/tabs.js"></script>

---

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