JavaScript tabifier

Features

• Converts your HTML into a dynamic tabbed interface.
• Does not require you to set up a list of links, or anchors for the tabs.
• Plug and play: no need to know JavaScript, just make a few simple changes to your HTML.
• Use CSS to customize the appearance of the tabs.
• Gracefully degrades if JavaScript is not present and allows a different set of styles to be applied when JavaScript is not present.
• Gracefully supports printing (try a print preview on the example.html page) and allows a different set of styles to be applied when printing.
• Multiple tab sets on a page - you can even nest one tab set within another.
• Set the initial tab to be displayed.
• Use javascript to control which tab is displayed.
• Define onLoad and onClick callback functions to perform more advanced functions, such as loading the tab content dynamically using AJAX.
• Use a cookie to remember which tab was selected so it remains selected when you return to the page.
• Object-oriented, extensively-commented code.
• MIT license so you can modify and use in commercial projects.

Step One

If you start with some simple HTML like this:

<h3>Section One</h3>
Section one content.

Section two content.

Add some structural DIV elements. Add a div with class=tabber around the whole thing:

<div class="tabber">
  <h3>Section One</h3>
  Section one content.

  Section two content.
</div>

Then add a div with class=tabbertab around each section. By default tabber will get the tab title from a heading element within the section, or you can set the title attribute to be the tab navigation text:

<div class="tabber">

  <div class="tabbertab">
    <h3>Section One</h3>
    Section one content.
  </div>

  <div class="tabbertab" title="MyTabTitle">
    Section two content.
  </div>

</div>

NOTE: the tabbertab DIVs must be child nodes of the tabber DIV. This was required in order to allow nested tabs.

Step Two

Include the javascript code:

<script type="text/javascript" src="tabber.js">
</script>

After your page finishes loading, the script runs to convert your plain HTML into dynamic HTML.

Note: if you do not want it to run automatically onLoad, refer to the advanced topics.

Step Three

Add some styles. Refer to the example CSS files provided, or modify one of the styles from Listamatic.

NOTE: Your original HTML has been transformed into something like this:

<div class="tabberlive">

  <ul class="tabbernav">
    <li class="active">
      <a href="javascript:void(null)" onclick="">
      Section One</a>
    </li>
    <li>
      <a href="javascript:void(null)" onclick="">
      MyTabTitle</a>
    </li>
  </ul>

  <div class="tabbertab">
    <h3>Section One</h3>
    Section one content.
  </div>

  <div class="tabbertab">
    Section two content.
  </div>

</div>

Note the following:

• The main div (class=tabber) has been changed to (class=tabberlive). This allows you to apply one style for the untabbed HTML, and a different style for the tabbed HTML.
• A ul list is added. Each item in the list is a link that triggers the dynamic navigation. The text of the link is the title attribute of the tabbertab div.

Advanced Topics

Setting the default tab

By default the first tab will be selected. To select a different initial tab, use the tabbertabdefault class (in addition to the tabbertab class):

<div class="tabbertab tabbertabdefault">
  <h3>Section Two</h3>
  This will be selected by default.
</div>

Refer to example2.html to see it in action.

Dynamically Changing the Tab

First you must give an id to your main tabber div.

<div class="tabber" id="mytab1">

A tabber object is attached to the div and you can use the tabShow() method to change which tab is displayed:

document.getElementById('mytab1').tabber.tabShow(0);

The tabs are numbered starting at zero, so use 0 for the first tab, 1 for the second tab, etc.

Deactivate onLoad

When you load tabber.js it sets up an event to run when the page finishes loading. To prevent tabber from running, before you include tabber.js, set the tabberOptions variable like this:

<script type="text/javascript">
var tabberOptions = {manualStartup:true};
</script>
<script type="text/javascript" src="tabber.js">
</script>

You might want to do this if you need more control over the way that tabber initializes itself. Alternatively, if you never want tabber to run automatically, you can edit tabber.js and just comment out that portion of the code.

onLoad and onClick event callback functions

You can set an onLoad function to be called after the tab interface has finished initializing, or an onClick function (to be called when a user clicks a tab).

<script type="text/javascript">
var tabberOptions = {'onClick':function(){alert("clicky!");}};
</script>
<script type="text/javascript" src="tabber.js">
</script>

Refer to example2.html for a more complete example.

Persistent tabs using cookies

Refer to example-cookies.html

Download

ZIP Archive

• tabber.zip

Individual Files

• tabber.js
• tabber-minimized.js (<5k)
• example.html
• example2.html
• example-ajax.html
• example-cookies.html
• example.css
• example-print.css)