Previous Message
Next Message

CSS to format <dl> as tabbed pane

Sent by Paul Novitski on 30 March 2006 01:01

At 04:08 PM 3/29/2006, Peter Michaux wrote:
>I'd like to learn how to use CSS to display a definition list as a
>tabbed pane. I think this would be a nice way to relate the tab and
>the content in case the browser is not CSS or the document is being
>presented aurally. Any tips on how to do this might get me headed in
>the right direction.


Here's one way to implement a tab control with DL:

Apply styling to change the DL to a tab control only when JavaScript 
runs.  Run the DTs across the top as your tabs, and show only the one 
currently-selected DD below:

1) In HTML, make each DT a hyperlink to facilitate accessible 
navigation.  JavaScript will add the "jstabs" id to the DL so that 
the following CSS will apply only when js executes.

<dl id="" class="">
         <dt class="item1"><a href="#item1">Coffee</a></dt>
         <dd class="item1">Black hot drink</dd>

         <dt class="item2"><a href="#item2">Milk</a></dt>
         <dd class="item2">White cold drink</dd>

(These enumerated class names could easily be added by JavaScript.)

2) JavaScript initializes by adding the id and the class of the 
default (or requested) tab:

<dl id="jstabs" class="item1">

3) In CSS, lay out the DT tabs as a horizontal row of blocks:

dl#jstabs dt
         display: block;
         float: left;
         width: #em;

4) Show only the currently selected DD panel:

/* set the DL as the framework for its absolutely-positioned children */
         position: relative;

/* default = panels hidden */
dl#jstabs dd
         position: absolute;
         left: -1000em;
         width: 999em;

/* on-state = panel shows */
dl#jstabs.item1 dd.item1,
dl#jstabs.item2 dd.item2,
dl#jstabs.item3 dd.item3,
         left: 0;
         top: #em;       /* move it down below list of DT tabs */
         width: ##em;

5) When JavaScript initializes, it assigns the onclick behavior to 
the DTs (or their As).  The onclick function copies the DT's 
className to its parent, replacing any existing "item#" class in the DL.

I've used a method of displaying the current panel by matching class 
names between parent and child.  An alternative method assigning an 
"active" class to the currently-selected DT & DD and remove it from 
the previously-selected tab & panel.  The way I usually do that is to 
establish a global variable that points to the object that's 
currently selected, so when the next item is selected I can easily 
remove the class name from the globally-pointed element without 
having to search the list for "active".

If either JavaScript or CSS is disabled, the markup will render as a 
(vertical) sequence of DT-DD pairs.

If you want the tabs to appear at the beginning like a table of 
contents to the panels when JS or CSS aren't active, you'll need to 
use another markup structure such as a list of links followed by a 
list of panels.


css-discuss [EMAIL-REMOVED]]
IE7b2 testing hub --
List wiki/FAQ --
Supported by --
Previous Message
Next Message

Message thread:

Possibly related: