Simple Tabbed Content Slider Plugin For jQuery - tabbedcontent

tabbedcontent is a jQuery based tabs plugin that provides a simple way to quickly create your own tabbed content slider with a bit codes.

Features:

• Support for error detecting
• Support for call back event
• Support for switching to a tab using build-in API

You might also like:

• Flexible-jQuery-Tabbed-Interface-Plugin-SmartTab
• Tabbed Content Slider Plugin with jQuery and XML - tNews
• Google Play Tabbed Navigation with jQuery and CSS3
• Simple jQuery Tab Navigation Menu Plugin - simpleTab
• Android-Like jQuery Tab Navigation Plugin - ShiftyNav

How to use it:

1. Include jQuery library and tabbedcontent.js on your web page

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="./jquery.tabbedcontent.js"></script>

2. The Html

<div class="wrapper">

<ul>
<li><a href="#tab-1">Tab 1</a></li>
<li><a href="#tab-2">Tab 2</a></li>
<li><a href="#tab-3">Tab 3</a></li>
<li><a href="#tab-n">Tab N</a></li>
</ul>

<div class="tabscontent">

<div id="tab-1">
Tab 1 Content
</div>
<div id="tab-2">
Tab 2 Content
</div>
<div id="tab-3">
Tab 3 Content
</div>

...

<div id="tab-n">
Tab n Content
</div>

</div>

</div>

3. The javascript

<script>
var tabs;
jQuery(function($) {
tabs = $('.tabscontent').tabbedContent().data('api');

$('a[href=#click-to-switch]').on('click', function(e) {
var tab = prompt('Tab to switch to (number or id)?');
if (!tabs.switch(tab)) {
alert('That tab does not exist :\\');
}
e.preventDefault();
});
});
</script>

4. All options

$('.tabscontent').tabbedContent({
// The tabs itself. 
// By default it selects the links contained in the previous wrapper or the links inside ".tabs a" if there's no previous item
links         : tabcontent.prev().find('a').length ? tabcontent.prev().find('a') : '.tabs a', 

// false to disable
errorSelector : '.error-message', 

// speed of the show effect. Set to null or false to disable
speed         : false, 

// onSwitch callback
onSwitch      : false, 

// onInit callback
onInit        : false, 

// current selected tab class (is set to the <a> element)
currentClass  : 'active', 

// tab error class
tabErrorClass : 'has-errors',

// if set to true will loop between tabs when using the next() and prev() api methods
loop          : false 
});

5. Methods.

var mytabs = $('.tabscontent').tabbedContent().data('api');

// now you can use the switch method:
mytabs.switch('#tab-1');

// or using it's index...
mytabs.switch(0); // note that first tab begins at 0

// you can also switch using id (whout #) and jQuery/Zepto objects
mytabs.switch('tab-1');
mytabs.switch($('.tabscontent div#tab-1'));

// you can also switch to next and previous tabs
mytabs.next();
mytabs.prev();

// the previous example won't loop the tabs; to do so you can set loop to true when configuring tabbedContent:
var mytabs = $('.tabscontent').tabbedContent({loop: true}).data('api');
// and / or you can pass it directly to the method:
mytabs.next(true);
mytabs.prev(true);

// check if current tab is first or last
if (mytabs.isFirst()) { /* do stuff */ }
if (mytabs.isLast()) { /* do stuff */ }

6. Full API.

// Switch to tab
'switch'       : function apiSwitch(tab) {},

// Switch to tab for old browsers
'switchTab'    : function apiSwitch(tab) {},

// Get current tab index
'getCurrent'   : function getCurrent() {},

// Get jQuery/Zepto object for specified tab
'getTab'       : function getTab(tab) {},

// Go to next tab in the tabs set
'next'         : function next(loop) {},

// Go to previous tab in the tabs set
'prev'         : function prev(loop) {},

// Returns true if current tab is first tab
'isFirst'      : function isFirst() {},

// Returns true if current tab is last tab
'isLast'       : function isLast() {}

Change Logs:

2017-05-22

• v1.7.0

2015-06-26

• Fixed getCurrent method not properly returning current tab
• Added bootstrap demo with multiple tabbed contents

1.5.0 (2015-04-19)

• Now the tab error class is defined to tabs (instead of tab contents)

1.3.0 (2014-03-29)

• New isFirst method
• New isLast method
• Improved performance removing repetitive calls to getCurrent method
• Updated readme file with information about isFirst and isLast
• Now onInit and onSwitch both have params to access the api, check the readme for details

(2013-11-25)

• Added four new API methods: getCurrent(), getCurrentId(), next(loop) and prev(loop)
• Added "next" and "prev" buttons to tabs content using new API method

---

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