jquery.tabToggle.js plugin

Get it from: http://github.com/oslego/tabToggle/tree/master

Demo

Simple setup

The tabToggle jQuery plugin makes tab navigation easy by pairing triggers to targets, that is, tabs to tab contents. By default triggers toggle the visibility of the targets.

No more conventions

Any HTML element can be a trigger for any target, also an HTML element. There's no conventions to follow, no naming tricks, and no dependencies.

targets.length == triggers.length

The only catch is that the number of triggers (tabs) must be equal to the number of targets (tab content element) - makes sense, don't you think?

Multiple tab navigators

Multiple instances of tab groups work just fine on the same page.
Default tab

This tab navigator was setup with {defaultSelectedIndex:1}.
In zero-indexed terms that means the default tab is the second one. Check out the settings object you can custom setup.
This is a <li> element

The targets for the 2nd tab group are <li> elements. There's really no constraint on what the trigger and target elements are as long as they're numbers are equal

Code Sample

Basic Setup

The tabToggle plugin is really simple to setup. Attach it to a set of elements that will be the triggers and specify an argument with the targets.
The number of triggers must be the same as the number of targets - this is the only limitation.

$('#tabs a').tabToggle($('#tabsContent div'));

Custom Settings

You can also add a settings object as the second parameter to the plugin setup.

var settings = {
  //CSS class to be applied to the selected trigger (tab)
  selectedClass: "selected",	
  //default trigger/tab pair index (Array-like, zero-indexed) to be active after the plugin loads 
  defaultSelectedIndex: 1
}
$('#tabs a').tabToggle($('#tabsContent div'), settings);