Recently I wanted to create a content box that would use tabs to organize a few sections of text. Here were my requirements:

1. Tabs oriented vertically (you can easily customize my example to be horizontal)
2. HTML be semantic, logical and gracefully degrade
3. Be easily accessible to screen readers
4. Easy to implement and portable
5. Works in IE, Firefox & Safari

I started by looking on the web for pre-existing examples of this and found a lot of things that worked well, but when you looked under the hood they were a mess.

Some used iframe, JXCSS (JS + XML[HttpRequest] + CSS) or AJAX but were overly complex for the simple task they did. It seemed as if the developer made it so complex so he could slap the “AJAX” sticker on it. The problem with these approaches is they’re not very portable or easy to understand; plus I would imagine they’re not too friendly to screen readers. So these failed requirements 2, 3 and 4.

The next common approach was to put the tabs in an unordered list and the content in divs under them. This is closer to the result, but still not acceptable. The UL tag has become the ‘semantic’ utility for all web developers (myself included) as a quick tableless fix. There are a lot of places where this tag is very useful and meaningful, but not everywhere. Let me explain. When you use a UL for the tabs in a tabbed box you are completely removing the titles from the content and destroying the natural structure. When degraded without CSS support it looks like this:

As you can see, when the CSS is removed, there’s no way to know which section is pointing to which paragraph. It is true that you could duplicate the link names as headers above each paragraph and use CSS to hide them, but that’s redundant and just plain lazy.

My approach is to lay everything out naturally and logically and then add CSS to make it look like a tabbed box. Here’s what my version looks like without CSS:

This degrades to something that is clearly marked and it’s easy to read. After the CSS has been added, it looks like this:

Getting Started — The HTML

Lets start by building the basic HTML:

<h2>Section One</h2>
<div>
   Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
</div>

<h2>Section Two</h2>
<div>
   Ut wisi enim ad minim veniam, quis nostrud exerci...
</div>

<h2>Section Three</h2>
<div>
   Li Europan lingues es membres del sam familie...
</div>
	

Next we’ll add some divs for styling. These also help encapsulate the tabs and content as well as makes the code portable and easy to implement.

<div>
   <div>
      <h2>Section One</h2>
      <div>
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </div>
   </div>

   <div>
      <h2>Section Two</h2>
      <div>
         Ut wisi enim ad minim veniam, quis nostrud exerci...
      </div>
   </div>

   <div>
      <h2>Section Three</h2>
      <div>
         Li Europan lingues es membres del sam familie...
      </div>
   </div>
</div>
	

Now for the CSS classes (tabbox, selected, tabpanel).

<div class="tabbox">
   <div class="selected">
      <h2>Section One</h2>
      <div class="tabpanel">
         Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
      </div>
   </div>

   <div>
      <h2>Section Two</h2>
      <div class="tabpanel">
         Ut wisi enim ad minim veniam, quis nostrud exerci...
      </div>
   </div>

   <div>
      <h2>Section Three</h2>
      <div class="tabpanel">
         Li Europan lingues es membres del sam familie...
      </div>
   </div>
</div>
	

And finally we add the links and event handlers to the headers to perform the tab switching.

<h2>
   <a href="#section_one" name="section_one"
         onclick="return changeTab(this)"
         onfocus="return changeTab(this)">
      Section One
   </a>
</h2>
	

Evolving — Add the CSS

Now let’s use CSS to make it look like a tabbed box. We start by positioning the Hn tags relatively and the content divs (or tabpanels) absolutely in the tabbox; this will make the titles stack natually as vertical tabs.

.tabbox { position: relative;
          top: 0;
          left: 0;
          width: 565px;
          height: 220px;
        }
.tabbox h2 { position: relative;
             margin: 0;
             padding: 0;
             width: 150px;
           }
.tabbox .tabpanel { position: absolute;
                    top: 0;
                    left: 150px;
                    width: 400px;
                    height: 150px;
                    padding: 7px;
                    z-index: 1;
                    display: none;
                  }

So this is a start, but all the content has disappeared because we’ve set display:none in the tabpanel class.

Now we define the selected class that will highlight the default tab and show it’s content:

.tabbox .selected .tabpanel { display: block;
                              overflow: auto;
                            }
.tabbox .selected h2 a { background: #DEDEDE;
                         cursor: default;
                       }

It should now resemble something close to a tabbed box.

At this point you add can the fluff to make it look presentable, and for my simple example, the final the CSS looks like this:

 .tabbox { position: relative;
		   top: 0;
		   left: 0;
		   width: 565px;
		   height: 220px;
		 }

 .tabbox h2 { position: relative;
              margin: 0;
              padding: 0;
              width: 150px;
              border: solid #000;
              border-width: 1px 0 0 1px;
              z-index: 2;
            }

 .tabbox .last h2 { border-bottom-width: 1px; }

 .tabbox h2 a { display: block;
                padding: 5px;
                margin: 0 1px 0 0;
                font-size: .8em;
                color: #000;
                text-decoration: none;
			  }

 .tabbox h2 a:hover { background: #FFC; }

 .tabbox .tabpanel { position: absolute;
                     top: 0;
                     left: 150px;
                     width: 400px;
                     height: 150px;
                     padding: 7px;
                     background: #DEDEDE;
                     border: 1px solid #000;
                     border-top: 1px solid #000;
                     z-index: 1;
                     visibility: hidden;
                   }

 .tabbox .selected .tabpanel { visibility: visible;
                               overflow: auto;
                             }

 .tabbox .selected h2 a { background: #DEDEDE;
                          margin: 0;
                          cursor: default;
                        }

Make it work — Add the JS

Lastly download and insert the JavaScript. I wont go into the JavaScript code from here, but if you followed my examples it should work right out of the box. You can also checkout my pre-baked example and compare.

It’s important to note that the JavaScript works off of the tabbox and selected classes and the basic HTML structure. You can have any HTML you want within the Hn tags and tabpanels, however, the overall framework must look the same.

And now we have the completed product.

Final Thoughts

I’m not the best or smartest developer and I’m sure there’s a million other (potentially better) ways to do this, and am interested to hear about them. If you’ve seen good examples of this, please leave a comment and tell me about it.