tinytabs plugin for jQuery

GitHub page Download ZIP

tinytabs is a tiny (1.1 KB minified) tabbing plugin for jQuery. All you need is a few layers in a container layer, and bam, tabbed interface. If Javascript is not enabled, it degrades nicely too.

Example code

HTML

<div id="mytabs">
	<div class="section" id="music">
		<h3 class="title">Music</h3>
		Content here
	</div>
	<div class="section" id="videos">
		<h3 class="title">Videos</h3>
		Content
	</div>
</div>

Javascript

$(document).ready(function() {
	$('#mytabs').tinytabs();

	// or

	$('#mytabs').tinytabs({		// optional options
		anchor: false,
		hide_title: false
	});
});

Options

anchor true (default) or false
If enabled, when a tab is clicked, it's id is set in url's hashtag so that the tab is retained on page reloads. Also enables linking to a tab directly.
Eg: http://kailashnadh.name/tinytabs#tab-example
hide_title true (default) or false
Hide the title element within section elements.
section_class Section element's class. Default is section.
tabs_class Tab (ul) container's class. Default is tabs.
tab_class Individual tab's (li) class. Default is tab.
title_class Title element's tag. Default is title.
before A function that gets evaluated before a tab is activated. Default is nothing.
If a function is defined, the first parameter will be the tab (DOM-element), the second one is the title of the tab.
after A function that gets evaluated after a tab has been activated. Default is nothing.
If a function is defined, the first parameter will be the tab (DOM-element), the second one is the title of the tab.

Video

Kailash Nadh