Skip to Navigation

Semantic Tabs - Using the better method of definition lists

Posted in:

Background

I was working on a project for my company and using a dhtml tabbing solution from dynamicdrive.com. After creating a few pages with this solution and trying to clean up my jsp/html, I realized that this solution was really messy.

Nobody wants to have all of these onclick events in their tags, passing parameters of other elements' ids...that's just ugly. After having recently experimented with my sortable and selectable zebra table widgets, I had an idea. I totally dumped the dynamic drive solution and wrote my own in about 20 minutes.

I was sick of mapping each tab to it's content by ID. I knew there had to be a better, more logical way. Remembering FrankManno.com's css flickr image maps, I decided that using a definition list was the best idea. Each term would be the tab, and it's definition would contain the content. It's a good thing that these elements are flexible...

The Good

It makes semantic sense! Each tab is immediately followed by the content which it corresponds to!

As tested so far, it works in:

  • IE, Win XP
  • Firefox 1.5, Win XP
  • Safari, Mac OSX 10.4.6
  • Firefox 1.0.6, Mac OSX 10.4.6

Can handle pretty much any sort of content in the "content pane."

You can mark a "selected" tab and it's content simply by adding a "current_tab" class attribute to the tab. The javascript handles the rest and will hide/show the appropriate content.

This is an improvement over a similar solution by Stefan Born because his script creates divs within the dd tags to handle the styles. The dynamically created div in Stefan's solution is not for the style. It allows multiple rows of tab panes.

The Bad

This currently relies on javascript. A few tweaks would allow it to deprecate well in browsers with javascript disabled, but I have no need for it yet and haven't put in the time.

The script only support only supports one "tab pane." It does this by hardcoding the "tab pane" ID in the javascript. Obviously this is bad. But again, I have no need to change this yet...and am lazy. It should be a fairly easy fix, though.

Like Stefan noted (see "the hurdle"), there is a funny margin at the top of the dd elements which I could not figure out how to eliminate. I thought that using the line-height css attribute would solve the problem, but so far have not had any luck.

The Files

  1. Definition List Tab - javascript
  2. Definition List Tab - css

Demo

Boring

I'm boring...this is the 1st tab's content. There's not too much here. Except a link.

link

Images

Hey, check this out! We can put images in here!

blah
Form

And forms too!

Overflow

Now we demonstrate overflow

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce interdum. Aenean lobortis, tellus vel venenatis consequat, metus arcu venenatis lectus, nec imperdiet justo justo vel velit. Proin eleifend. Duis fringilla velit id leo. Vivamus sem justo, rhoncus et, accumsan sollicitudin, mattis quis, quam. Quisque at quam vel neque rhoncus tincidunt. In vitae nisi non mi volutpat cursus. Aliquam ut libero a ante gravida scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam lectus enim, placerat id, vehicula porttitor, convallis nec, elit. Aenean placerat malesuada lectus. Ut laoreet lacus eu diam. Nullam ac erat. Suspendisse potenti. Fusce dignissim. Praesent ac turpis in justo viverra congue. Maecenas facilisis pretium neque. Maecenas tempus lacus sit amet magna pretium viverra.

Quisque facilisis vehicula diam. Mauris imperdiet neque et lacus. Curabitur vitae neque et est scelerisque feugiat. Aenean aliquet, lectus tincidunt rutrum sollicitudin, libero lacus pellentesque nunc, eget semper velit sapien in leo. Ut fermentum enim vitae odio. Nulla facilisi. Ut commodo tincidunt eros. Mauris pellentesque sapien ut massa. Pellentesque tempus varius arcu. Suspendisse potenti. Duis enim lacus, suscipit vel, condimentum in, dictum sed, purus. Nam nunc urna, iaculis non, mattis sit amet, dapibus sit amet, arcu. Nunc vehicula. Ut justo odio, vestibulum id, sodales sit amet, varius ut, sapien. Etiam tempus mauris eu quam. Aliquam leo mi, ultrices eu, malesuada quis, bibendum sit amet, ante. Suspendisse libero odio, ultricies ac, imperdiet sit amet, condimentum ut, est. Praesent eu risus. Pellentesque bibendum urna quis magna. Pellentesque aliquet rutrum tortor.

Maecenas tempor nibh sit amet neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut sed nisi quis diam sodales pretium. Ut a justo. Fusce vestibulum. Donec fermentum felis eget quam. Nunc vel lorem ac quam ullamcorper posuere. Aliquam egestas viverra eros. Etiam arcu orci, consectetuer in, placerat quis, mollis bibendum, metus. Aenean tempus nisi vitae lorem. Fusce tristique. Maecenas molestie rhoncus leo.

Donec blandit ipsum ut justo. Phasellus facilisis placerat nulla. Vestibulum eget augue sit amet pede volutpat interdum. Nunc vel justo lacinia nisl elementum auctor. Donec urna. Aenean scelerisque volutpat ipsum. Nunc at libero. Aliquam ullamcorper sapien eget turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque suscipit lectus vitae tellus nonummy euismod. Phasellus feugiat, sem non aliquet rhoncus, nisi risus posuere ipsum, in facilisis nisl urna ut purus. Aenean mi. Donec imperdiet facilisis justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed non tortor a diam dictum imperdiet. Pellentesque aliquet pede sed risus ornare euismod. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Vestibulum elementum augue eget sapien. Curabitur id erat. Etiam feugiat adipiscing tellus. Proin lacinia odio. Donec condimentum elementum sapien. Phasellus blandit semper purus. Sed blandit. Morbi pede erat, ultricies nec, porta non, luctus eget, purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec id eros quis ipsum faucibus feugiat. Phasellus justo dui, fermentum at, elementum et, lobortis sit amet, urna. Nunc laoreet leo et odio. Nam est. Pellentesque suscipit, lacus eget bibendum rhoncus, neque lacus suscipit arcu, a tristique lorem ligula nec erat. Pellentesque consectetuer porttitor ipsum. Cras ac massa. Nunc nec magna. Donec aliquet feugiat nulla. Nulla hendrerit turpis id lorem. Vestibulum molestie diam.