Tiny Adaptive Tabbed Interface Plugin With jQuery - Organic Tabs

Organic Tabs is a lightweight jQuery plugin to create an adaptive tabs interface where the tabbed panel will auto expand / collapse according to the height of its inner content. Licensed under the GNU GENERAL PUBLIC LICENSE Version 3.

How to use it:

1. To use this plugin, you need to download and include the jquery.organictabs.js script after you've included jQuery library like this:

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="js/jquery.organictabs.js"></script>

2. Create tabbed panels with unique IDs.

<div id="tab-1">
  Panel 1
</div>

<div id="tab-2">
  Panel 2
</div>

<div id="tab-3">
  Panel 3
</div>

3. Create tabbed navigation links pointing to the corresponding panels.

<ul class="nav">
  <li class="nav-one"><a href="#tab-1" class="current">Tab 1</a></li>
  <li class="nav-two"><a href="#tab-2">Tab 2</a></li>
  <li class="nav-three"><a href="#tab-3">Tab 3</a></li>
</ul>

4. Call the function on the top container to active the tabbed interface.

$("#container").organicTabs();

5. Style the tabbed interface as per your need.

/* Generic Utility */

.hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/* Custom styles */

.nav {
  ...
}

6. Adjust the default sliding speed during init.

$("#container").organicTabs({
   "speed": 300
});

 

---

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