Tabtastic v1.0.4 2004-May-21

Table of Contents

Overview

This library is a simple way to implement tabs on your page using CSS, a little JS, and semantic markup which degrades gracefully on browsers with CSS unavailable or disabled.

Not only is it easy to use and accessible for screen-readers, but it supports multiple (nested, even) tabsets on the same page and allows users to bookmark the page loading to a specific tab.

Here's some sample markup:


<ul class="tabset_tabs">
   <li><a href="#tab1" class="active">Tab 1</a></li>
   <li><a href="#tab2">Tab 2</a></li>
   <li><a href="#tab3">Tab 3</a></li>
</ul>

<div id="tab1" class="tabset_content">
   <h2 class="tabset_label">Tab 1</h2>
   Tab 1 Content
</div>

<div id="tab2" class="tabset_content">
   <h2 class="tabset_label">Tab 2</h2>
   Tab 2 Content
</div>

<div id="tab3" class="tabset_content">
   <h2 class="tabset_label">Tab 3</h2>
   Tab 3 Content
</div>
	

It's that easy! (As long as you include the files listed in the Requirements section.)

Requirements

This library has been tested to work with Safari 1.2, IE 5.5, Mozilla 1.4, Netscape 7, and Firefox 0.8. It works almost perfectly in Mozilla 0.9 and NS6, and degrades gracefully in IE5Mac and Opera. It should work with any modern, standards-compliant browser. (IE5Mac and Opera7 support are possible; read the last bullet in the Notes section.)

In addition to markup as shown in the Overview, you need to include some other files for this to work automagically.

Specifically, you need to copy one CSS file (tabtastic.css), one JS file (tabtastic.js), and three JS library files (AttachEvent.js, AddClassKillClass.js, AddCSS.js).

The head of your HTML page should look something like this:

<script type="text/javascript" src="addclasskillclass.js"></script>
<script type="text/javascript" src="attachevent.js"></script>
<script type="text/javascript" src="addcss.js"></script>
<script type="text/javascript" src="tabtastic.js"></script>

For step-by-step instructions, see Step By Step.

Step-by-Step

Step-by-step instructions for building your own tabset:

  1. Copy the five files listed in the Requirements section to your server.
  2. Assuming the files you copied are in the same directory as the HTML file you're putting the tabs in, put this code in the <head> of your document:
    <script type="text/javascript" src="addclasskillclass.js"></script>
    <script type="text/javascript" src="attachevent.js"></script>
    <script type="text/javascript" src="addcss.js"></script>
    <script type="text/javascript" src="tabtastic.js"></script>
  3. Create a <ul> with class="tabset_tabs". For each tab, create code like this:
    <li><a href="#tabid">Tab Title</a></li>
  4. (optional) If you want one tab to start out as the 'active' tab, put class="active" in the <a> for that tab.
  5. For each tab, create content like this:
    <div id="tabid" class="tabset_content">
       <h2 class="tabset_label">Tab Title</h2>
       ...
    </div>

    (The <h2> will not display, but is important for accessibility.)

  6. (optional) Add your own additional custom CSS rules to change the colors which are used. (See Notes.)

Notes

A few random tips and limitations: