Tabbed Panels from Definition List

Hello everyone,

Hopefully someone can help me out.

I have a definition list which has one dt per dd (pretty typical). Now, the tricky part is I want to be able to pull each dt to the top so I can create a kind of tabbed content.

Can anyone think of a method which doesn’t involve me manually specifying the left value for absolutely positioned dts?


Here is a way to do it. I have written the resulting list of dts to the page. You may have other ideas on what to do with it. I have used inline scripts to make it clear what is going on.

<!doctype HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>


<meta http-equiv=“Content-Type” content=“text/html; charset=windows-1252”>
<title>Definition list manipulation</title>
<script type=“text/javascript”>
var allDTs
function getDT()
{ allDTs=document.getElementsByTagName(“dt”);
var build=‘<p class=“smlB”>List of DTs<\/p>
for(var i=0;i<allDTs.length;i++)
<style type=“text/css”>
body { font-family:arial, helvetica, sans-serif; color:#000; font-size:13px; font-weight:bold }
dd { color:#00F; }
#output p { margin-top:0px; margin-bottom:5px; color:#F00; }

.smlB { font-size:12px; font-weight:bold; color:#000080; }

<body onload=“getDT()”>

<dd>Dwelling for people</dd>
<dd>Dwelling for birds</dd>
<dd>Dwelling for rabbits</dd>
<div id=“output”>
<!-- end output –>



Thanks for the attempt. Unfortunately that uses a lot of generated HTML, which I’m not a fan of.

I wound up using a technique very similar to the one described here:

It requires me to position each dt, but I prefer this to having to generate a lot of extra markup.

Haven’t tried this but wondering if you could just use float instead of positioning each dt?

Here’s another one

It looks like that’s going the other direction (with tabs on the left side).

I tried floating them (and using all possible arrangements of display) and they space horizontally how I wanted, but all of the dts that come after the dd stay below that dd.

I just edited the example page you gave in firebug. I was able to take out the positions and float them all left

dl#program_details dt#tab_overview, dl#program_details dt#tab_works, dl#program_details dt#tab_var, dl#program_details dt#tab_billing, dl#program_details dt#tab_legal  {
			float: left;

This is off the top of my head so may not be 100% but try it out.

You’re right, it does work.

I found what is different between mine and their example. He has the DD set to position: absolute as well. However, in my case, I can’t have DD set to position: absolute (because I need it’s parent to stretch to appear properly).