tinytabs — Javascript lib for tabbed UIs

GitHub page Download ZIP

tinytabs is a tiny (1.3 KB minified) Javascript tabbing library. Zero dependencies. 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

Include the CSS file

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

Then

<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

// With options.
document.addEventListener("DOMContentLoaded", function(e) { 
  tinytabs(document.querySelector("#mytabs"), {
    anchor: true,
    hideTitle: false
  });
});

// Without options.
document.addEventListener("DOMContentLoaded", function(e) { 
  tinytabs(document.querySelector("#mytabs"));
});

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
hideTitle true (default) or false
Hide the title element within section elements.
sectionClass Section element's class. Default is section.
tabsClass Tab (ul) container's class. Default is tabs.
tabClass Individual tab's (li) class. Default is tab.
titleClass Title element's tag. Default is title.
before function(id, tab). Callback function that gets evaluated before a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab.
after function(id, tab). Callback function that gets evaluated after a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab.

Video

Kailash Nadh