Simple Toggle Tabs Plugin with jQuery/HTML5 - Tabby

File Size: 123 KB
Views Total: 5960
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></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 data-tab="tab2">
    <p>Tab Content 2</p>
  <div data-tab="tab3" data-ajaxcontent="ajaxcontent.html"></div>

4. Create tab navigation for the tabbed content.

<nav id="tabby-demo" class="tabby-tabs" data-for="tab-content">
    <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>

5. Initialize the plugin and done.


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


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


Change log:


  • 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.