jQuery Plugin For Automatically Creating Tabs - autotabs

File Size: 101 KB
Views Total: 3383
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Automatically Creating Tabs - autotabs

autotabs is a simple jQuery plugin for automatically creating a tabbed pane to display the content which is broken into logical sections.

You might also like:

Features:

  • Lightweight and easy to use
  • Highly customizable via CSS and javascript
  • Support dynamic loading of tab panes via ajax
  • Custom callback functionality supported
  • Support jQuery Cookie Plugin

Basic Usage:

1. Include jQuery library and jQuery autotabs

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.autotabs.min.js"></script> 

2. Include jquery.autotabs.css to style the tabs

<link rel="stylesheet" type="text/css" href="jquery.autotabs.css" />

3. Include jquery cookie plugin for cookies support (OPTIONAL)

<script src="jquery.cookie.js"></script> 

4. Create the markup for your tab panes. All tab panes for a given set of tabs should be the children of the same parent element.

<div id="tabs">
  <div>
    <h3>Tab 1</h3>
    Content of tab 1
  </div>
  <div title="Tab 2">Content of tab 2</div>
  <div>Content of tab 3</div>
</div>

5. Call the plugin

$('#tabs').autotabs();

Change log:

v2.1.0 (2014-08-21)

  • fixed removal of existing tabs element when tabs_class option contains spaces

v2.0.18 (2014-08-16)

  • updated code style and docs;
  • added support for data attributes

v2.0.11 (2013-09-23)

  • updated to the latest version

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