tabmenu is a tiny jquery plugin that will turn a bit of html markup into tabs. It only takes care of the hide/show business, and even this is done solely through css classes so you retain full control over the look.

tabmenu works with the following markup :

<div id="tabcontainer">
	<nav >
		<ul>
			<li>
				<a href="#tab1" class="ux-tab-label">
					tab 1
				</a>
			</li>
			<li>
				<a href="#tab2" class="ux-tab-label">
					tab 2
				</a>
			</li>
		</ul>
	</nav>
	<div id="tab1" class="ux-tab">
		Content of first tab
	</div>
	<div id="tab2" class="ux-tab">
		Content of second tab
	</div>
</div>

You can use whatever tags you like, except for the tab labels which have to be links (ie. a element).

$(function(){
	$('#tabcontainer').tabmenu();
});

Simple.

tabmenu doesn't directly hide/show anything, it just add and removes classes.

Tab that should be hidden get the class hidden, and the a tag that corresponds to the currently displayed tab gets an active class.

You have the abilty to change those class names at initialization :

$('.ux-tabmenu').tabmenu({hiddenClass: 'my-hidden-class', activeClass: 'my-active-class'});

It's up to you to manage how the tabs should look like, how exactly you want to hide the tabs, etc. It may for example make sense to only visually hide tabs, but keep them accesible for screen readers. But things can be as easy as this :

.active{
	color: #cc0000;
}
.hidden{
	display: none;
}