Features

Stereotabs is a small and lightweight script that allows you to easily add interactive tabs to your web pages.

• 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.

<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
});