Tabbable 0.1

Edit: Unfortunately, in between blog migrations, I’ve long ago lost the source code to this. It would have been nice to have retained it as part of my programming journey.

I needed a light-weight tabbing widget for one of the projects I was working on, and not finding anything satisfactory, decided to throw one together.

The objective was to make it as simple to use as possible. The content to be tabbed should be marked up like so:

<div id="tab1" class="tabbable">1st tab</div>
<div id="tab2" class="tabbable">2nd tab</div>

Important things to note, IDs must be defined, and the class set to tabbable.

There should be an empty div to hold the generated tabs.

<div id="tablist"></div>

A call to initialise the script is made in the window onload event:

tabsInit('tab1');

There is only one compulsory parameter, and that is the default active tab. There are two optional parameters, tabNav and tabClass. tabNav defines the id for the HTML element to hold the tabs in and defaults to tablist if undefined, and tabClass defines the class of the tabbable content, which defaults to tabbable.

The script is built from the prototype $ and getElementsByClass functions as presented by Dustin Diaz.