Basic jQuery Tabbed Interface Plugin - Tabify

Tabify is a really simple jQuery plugin that helps you generate a basic tabbed interface from plain Html markup.

How to use it:

1. Load the jQuery Tabify plugin's script after loading jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src='tabify.js'></script>

2. Markup Html structure for the tabbed navigation & panels.

<div class="myTabs">
  <ul>
    <li>Tab One</li>
    <li>Tab Two</li>
    <li>Tab Three</li>
  </ul>
  <div>
    <h3>Page 1</h3>
  </div>
  <div>
    <h3>Page 2</h3>
  </div>
  <div>
    <h3>Page 3</h3>
  </div>
</div>

3. The primary CSS styles for the tabbed interface.

input[name=tabifyTabs] { display: none !important; }

input[name=tabifyTabs] + label {
  padding: 10px !important;
  display: inline-block;
  height: auto !important;
}

input[name=tabifyTabs]:checked + label {
  background: #FAFAFA;
  color: #44587D;
}

.tabify { text-align: center; }

.tabifyTabs { height: auto; }

.tabifyTabs > div {
  display: none;
  padding: 10px;
  padding-top: 10px;
}

.tabifyTabs div .dropdown-button {
  padding-left: 30px;
  padding-right: 30px;
}

4. Add your own styles to the tabbed interface.

input[name=tabifyTabs]:nth-of-type(1):checked ~ .tabifyTabs > div:nth-child(1),
input[name=tabifyTabs]:nth-of-type(2):checked ~ .tabifyTabs > div:nth-child(2),
input[name=tabifyTabs]:nth-of-type(3):checked ~ .tabifyTabs > div:nth-child(3),
input[name=tabifyTabs]:nth-of-type(4):checked ~ .tabifyTabs > div:nth-child(4) {
  ...
}

.tabify {
  ...
}

.tabifyTabs > div { 
  ...
}

5. Initialize the plugin.

$('.myTabs').tabify();

---

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