Features

Stereotabs is a small and lightweight script that allows you to easily add interactive tabs to your web pages. Very much inspired by Kevin Miller's Accordion script, this bit of code makes creating an smooth tabbed interface easy.

• Unobtrusive » All behaviors are added after page load and don't muck up your html. Visitors without javascript will see all of your content.
• Simple » You can add it to your existing pages quickly with just a few lines.
• Small » Uncompressed the source is 82 lines long. 2k!
• It Remembers » Your tabs are actually links to page anchors. Reload the page and the same tab will remain active.

Setup

Download the code.
Stereotabs requires prototype.js and effects.js (part of the scriptaculous library). If you don't want the fade-in / fade-out effect, you can do without effects.js

Include the source files.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/stereotabs.js"></script>
    

Initialize the tabs.

<script type="text/javascript">
//<![CDATA[
Event.observe(window, 'load', loadTabs, false);
function loadTabs() {
var tabs = new tabset('container'); // name of div to crawl for tabs and panels
tabs.autoActivate($('tab_first')); // name of tab to auto-select if none exists in the url
}
//]]>
</script>
    

Create your tabs.
Stereotabs will crawl the DOM element you specify for elements that contain the "tab" class and "panel" class (you can specify class names if you wish). It then uses these elements' ID tags to know which element to display when each tab is clicked. Here is a simple example. Notice each tab has the class "tab" and each tab content has the class name "panel". Also not that the IDs of the tabs match up with the IDs of the tab content.

<div id="container">
<ul id="tabnav">
  <li><a href="#first" id="tab_first" class="tab">Tab One</a></li>
  <li><a href="#second" id="tab_second" class="tab">Tab Two</a></li>
  <li><a href="#third" id="tab_third" class="tab">Tab Three</a></li>
</ul>
<div id="panel_first" class="panel">
  Here is the content for the first tab.
</div>
<div id="panel_second" class="panel">
  Here is the content for the second tab.
</div>
<div id="panel_third" class="panel">
  Here is the content for the third tab.
</div>     
</div>
        

Configuration

You can create a tab set and pass it a few options to customize it to your current page structure. By default, the code will search for tabs by using the class name "tab", and tab content using the class name "panel". It also will apply the class name "selected" to the currently selected tab.

You may also have noticed that the id attributes for the tags and tag content started with either "tab_" or "panel_". This is a way to link a tab with its specific content while still keeping the ids unique. You can change these in the configuration as well.

Finally, if you wanted, you can turn off the fade effect, and also change the event that triggers the tab activation.

Below is an example of how you can pass options to your tab set.

var tabs = new tabset('container', {
classNames: {
  tab:        'tab',      // class name used to identify the tabs
  panel:      'panel',    // class name used to identify the tab content
  tabActive:  'selected'  // class name added to the active tab
},                        
ids: {                    
  tab:        'tab_',     // what to strip off the tab id to get the tab name
  panel:      'panel_'    // what to strip off the tab content id to get the tab name
},                        
onEvent:      'click',    // perhaps you want to activate on mouseover? not recommended
effects:      true        // set this to false if you do not want to include effects.js
});
          

Download

New version works with FF3 and Prototype 1.6! Download the new version of stereotabs 1.6.

Download the old version for Prototype 1.5 (won't work with Firefox 3) here. Or, if you just want the source and not the whole archive, you can view stereotabs.js.