JavaScript tabifier

Features

• Converts your simple HTML into a dynamic tabbed interface.
• 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:
  Uh huh.

  No special code needed - but be careful with your CSS selectors!
• Object-oriented code.
• No global variables - attaches directly to the DOM.

Step One

If you start with some simple HTML like this:

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

<h3>Section Two</h3>
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.

  <h3>Section Two</h3>
  Section two content.
</div>

Then add a div with class=tabbertab around each section, and set the title attribute to be the tab navigation text:

<div class="tabber">

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

  <div class="tabbertab" title="Section Two">
    <h3>Section Two</h3>
    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>

This adds an onload event to your page. After your page loads, the script runs to convert your plain HTML into dynamic HTML.

Alternatively, you can comment out the onload part and run it immediately.

Step Three

Add some styles. 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="notshownhere()">
      Section One</a>
    </li>
    <li>
      <a href="javascript:void(null)"
      onclick="notshownhere()">
      Section Two</a>
    </li>
  </ul>

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

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

</div>

• The main div (class=tabber) has been changed to (class=tabberlive). This allows you to apply one set of styles for the untabbed HTML, and a different styles 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.