tinytabs plugin for jQuery

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