Simple jQuery Tabs Plugin For Tabbed Content

A simple, lightweight jQuery plugin that provides a basic tab switcher logic to show and hide tabbed content by clicking nav tabs.

See also:

• 10 Best Tabs Systems In JavaScript And/Or Pure CSS

How to use it:

1. Create tabs and tabbed content on the page.

<div class="tabs-menu">
  <div id="tab-1" class="tabs-menu-item active">Tab 1</div>
  <div id="tab-2" class="tabs-menu-item">Tab 2</div>
  <div id="tab-3" class="tabs-menu-item">Tab 3</div>
</div>

<div class="tabs">
  <div class="tab tab-1 current">
    Tab 1 Content
  </div>
  <div class="tab tab-2">
    Tab 2 Content
  </div>
  <div class="tab tab-3">
    Tab 3 Content
  </div>
</div>

2. Show & hide tabbed content using CSS.

.tabs div {
  display:none;
}

.tabs div.current {
  display:block;
}

3. Highlight the active tab.

.tabs-menu div.active {
  background:#000000; color:#ffffff;
}

4. Load jQuery JavaScript library and the Simple-Tabs plugin at the end of the document. That's it.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery-simple-tabs.js"></script>

---

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