Responsive Accessible jQuery Tabs Plugin - PIGNOSE Tab

PIGNOSE Tab is a very small (~4kb) jQuery tabs plugin which lets you create animated, responsive, accessible, nested tabbed interface for your long content.

Features:

• Supports unlimited sub tabs.
• Build using plain html unordered lists.
• Custom On/off animations.
• onClick callback.
• Supports web accessibility.
• Cross browser and cross platform.

Basic usage:

1. To use this plugin, you need to load jQuery library together with the stylesheet pignose.tab.min.css and JavaScript pignose.tab.min.js in the webpage.

<link rel="stylesheet" href="dist/css/pignose.tab.min.css">
<script src="//code.jquery.com/jquery-1.12.2.min.js"></script> 
<script src="dist/js/pignose.tab.min.js"></script> 

2. Create the tab navigation and content.

<div class="tab">
  <ul>
    <li> <a href="#">TAB-1</a>
      <div> Content 1 </div>
    </li>
    <li> <a href="#">TAB-2</a>
      <div> Content 2 </div>
    </li>
    <li> <a href="#">TAB-3</a>
      <div> Content 3 </div>
    </li>
  </ul>
</div>

3. Just call the plugin on the top element and done.

$('.tab').pignoseTab();

4. To create a multi-level tabbed interface, just add your content into nested html lists as follows:

<div class="tab">
  <ul>
    <li> <a href="#">TAB-1</a>
      <div>
        <div class="tab">
          <ul>
            <li> <a href="#">SUBTAB 1-1</a>
              <div> Content 1-1 </div>
            </li>
            <li> <a href="#">SUBTAB 1-2</a>
              <div> Content 1-2 </div>
            </li>
            <li> <a href="#">SUBTAB 1-3</a>
              <div> Content 1-3 </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li> <a href="#">TAB-2</a>
      <div>
        <div class="tab">
          <ul>
            <li> <a href="#">SUBTAB 2-1</a>
              <div> Content 2-1 </div>
            </li>
            <li> <a href="#">SUBTAB 2-2</a>
              <div> Content 2-2 </div>
            </li>
            <li> <a href="#">SUBTAB 2-3</a>
              <div> Content 2-3 </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
    <li> <a href="#">TAB-3</a>
      <div>
        <div class="tab">
          <ul>
            <li> <a href="#">SUBTAB 3-1</a>
              <div> Content 3-1 </div>
            </li>
            <li> <a href="#">SUBTAB 3-2</a>
              <div> Content 3-2 </div>
            </li>
            <li> <a href="#">SUBTAB 3-3</a>
              <div> Content 3-3 </div>
            </li>
          </ul>
        </div>
      </div>
    </li>
  </ul>
</div>

5. Config the plugin with the following options.

$('.tab').pignoseTab({

  // fired when a tab is clicked
  'callback'        : null,

  // true = enable the animation
  'animation'       : 'static',
  'animationTime'   : 300,
  'animationEasing' : 'easeInOutCubic',

  // CSS selector for sub tabs
  'children'        : '.sub-tab'
  
});

---

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