Simple Toggle Tabs Plugin with jQuery/HTML5 - Tabby

Tabby is a super tiny jQuery plugin used to create a stylish tabs control with support for Ajax loaded content.

Basic Usage:

1. Load the latest version of jQuery library in your document.

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

2. Load the jQuery tabby plugin's files in the document. Make sure the jquery.tabby.js script is loaded after jQuery library.

<link rel="stylesheet" href="css/tabby.css">
<script src="dist/jquery.tabby.js"></script>

3. Create tabbed content and use data-ajaxcontent attribute to specify the external URL you wish to load into the tabs control via Ajax request.

<div class="tabby-content" id="tab-content">
  <div data-tab="tab1">
    <p>Tab Content 1</p>
  </div>
  <div data-tab="tab2">
    <p>Tab Content 2</p>
  </div>
  <div data-tab="tab3" data-ajaxcontent="ajaxcontent.html"></div>
</div>

4. Create tab navigation for the tabbed content.

<nav id="tabby-demo" class="tabby-tabs" data-for="tab-content">
  <ul>
    <li><a data-target="tab1" class="active" href="#">Tab 1</a></li>
    <li><a data-target="tab2" href="#">Tab 2</a></li>
    <li><a data-target="tab3" href="#">Tab 3</a></li>
  </ul>
</nav>

5. Initialize the plugin and done.

$('#tabby-demo').tabby();

6. Default plugin options. Options can be overwritten when initializing plugin, by passing an object literal, or after initialization.

$('#tabby-demo').tabby({

fadedOpacity: '0.2',
onInit: function () {},
onLoad: function () {},
onDestroy: function () {}

});

Change log:

2015-02-10

• added a loading spinner for Ajax requests.

---

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