To make this happen you start with plain, semantic HTML, then you add a JavaScript layer to rework the page into something better:

One problem with this technique is that your JavaScript must run after the HTML has been set up and rendered on the page, so a user with a slow connection might see something like this using my JavaScript tabbifier:

This is not too pretty, so obviously we want to make it stop.

Your first thought might be “I’ll just add a style to the content to make it hidden (CSS display:none), then my JavaScript will run and reveal it!” But that puts a big crack in our Holy Grail, because if you use CSS to hide the content, it will not be visible to users who do not have JavaScript.

Here’s the method I used:

1. Add a class javascript-hide-me to the content you need to hide, but do not define that class in your CSS.
2. Before the content, use JavaScript to define the CSS class. The easiest way to do this is by using document.write in the head section of the page, but you will have to directly modify the DOM if you are serving XHTML pages that use MIME type application/xhtml+xml.
3. After the content has been transformed, use JavaScript to remove the CSS class and reveal the content.

Here are two examples, one that exhibits the flashing problem, and another that fixes it using the technique described above. Note that in order to see the flashing problem, you need a slow internet connection: I recommend throttling your connection using the excellent Charles Web Debugging Proxy.

• flashing
• flashing fixed

Updates 2006-03-09

Welcome, Ajaxians!

Bobby describes an alternate technique in case you are serving XHTML pages that use MIME type application/xhtml+xml.

Steve Clay makes a valid point that we should check for DOM compatibility before writing the styles on the page.

A while back I was working on an automated tabifier using JavaScript, then this popped up today in the popular page in deli.icio.us: Link

I shouldn’t post unfinished code, but damn it, I think mine is better!

My tabs are completely CSS controlled, they look great without JavaScript and the page always prints (I think a lot of DHTML developers do not take into effect that a page will be printed).

Anyway, check it out here: JavaScript tabifier

If you like it please contact me – with enough encouragement I might continue this project.