TabSwapper

docs

The TabSwapper class helps you make another very common layout: the tabbed box. This is where the layout has a box with tabs across the top. The user clicks a tab and the content below it is displayed. It's kinda like a carousel without the animation. Unlike the carousel, the content doesn't have to be absolutely positioned over itself, as things are actually set to display:none when they switch.

Example:

<div id="tabBoxExample">
  <ul class="tabSet">
    <li class="off"><a>first tab</a></li>
    <li class="off"><a>second tab</a></li>
    <li class="off"><a>third tab</a></li>
  </ul>
  <div class="panelSet">
    <div class="panel">I'm the content for the first panel.</div>
    <div class="panel">
			<p>I'm the content for the second panel.</p>
			<p>I'm the content for the second panel.</p>
		</div>
    <div class="panel">
			<p>I'm the content for the third panel.</p>
			<p>I'm the content for the third panel.</p>
			<p>I'm the content for the third panel.</p>
		</div>
  </div>
</div>

new TabSwapper({
  selectedClass: 'on',
  deselectedClass: 'off',
  tabs: $$('#tabBoxExample li'),
  clickers: $$('#tabBoxExample li a'),
  sections: $$('div.panelSet div.panel'),
  /*remember what the last tab the user clicked was*/
  cookieName: 'tabSetExample',
  /*use transitions to fade across*/
  smooth: true,
	smoothSize: true
});