Semantic Tabset

Semantic Tabsets v1.0 2004-Apr-12

Due to the limitations in this implementation, see also Tabtastic.

xxx

Overview

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

Here's some sample markup:


	<dl class="tabset"><dt class="ieclear"></dt>
	
		<dt>Tab 1</dt>
		<dd>Tab 1 Content</dd>
		
		<dt>Tab 2</dt>
		<dd>Tab 2 Content</dd>
	
		<dt>Tab 3</dt>
		<dd>Tab 3 Content</dd>
	</dl>

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 IEWin 6, Safari 1.2, Firefox 0.8; it should work with any modern, standards-compliant browser.

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 include one CSS file (semantictabset.css), one JS file (semantictabset.js), and two JS library files (AttachEvent.js and AddClassKillClass.js).

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


	<link rel="stylesheet" type="text/css" href="semantictabset.css">
	<script type="text/javascript" src="addclasskillclass.js"></script>
	<script type="text/javascript" src="attachevent.js"></script>
	<script type="text/javascript" src="semantictabset.js"></script>

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

Step By Step

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

Copy the four files listed in the Requirements section to your server.
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:
<link rel="stylesheet" type="text/css" href="semantictabset.css"> <script type="text/javascript" src="addclasskillclass.js"></script> <script type="text/javascript" src="attachevent.js"></script> <script type="text/javascript" src="semantictabset.js"></script>
Create a <dl> with class="tabset". Use <dt> for each tab header, and an immediately-following <dd> for the body that goes with that tab.
To work around a bug in IE6, add <dt class="ieclear"> </dt> before the first tab.
(optional) If you want one tab to start out as the 'active' tab, put class="active" in the <dt> for that tab.
(optional) Add your own additional custom CSS rules to change the colors which are used.

Notes

A few random tips and limitations:

In this version, the content for each tab area is placed using absolute positioning. This means that additional content on the page after the tab set will not automatically account for the height of the tab content, but will instead layout as though only the tabs themselves are on the page.
For enhanced accessability, if you put an id on the <dt> for a tab, anchors which go to that id will automatically show the tab. (e.g. <dt id="foobar">...</dt> ... <a href="#foobar">show my tab</a>.)
The following CSS selectors will give you control over the styling of the content:
dl.tabset { /* The tabset itself */ } dl.tabset dt { /* A normal tab */ } dl.tabset dt.hover { /* A normal tab, when hovered over */ } dl.tabset dt.active { /* The selected tab */ } dl.tabset dd.active { /* The selected tab's contents */ } dl.tabset dt.preActive { /* The tab to the left of the selected tab */ } dl.tabset dt.postActive { /* The tab to the right of the selected tab */ }

Contact & License

This code is copyright ©2004 by Gavin Kistner, and is covered under the license viewable at http://phrogz.net/JS/_ReuseLicense.txt, which basically says that you can use it for free as long as you include a new notices in your source code.