A fellow named Klaus has created a nifty little plugin that creates accessible unobtrusive javascript tabs using jQuery.

With the correct (x)HTML and CSS you can create tabs as easily as 

$.tabs("container"); // first tab on by default

If you want to have the second tab “on” by default:

$.tabs("container", 2); // second tab on

Klaus has an example that you can view to see the end result.

My Contribution

I had to do something to add to Klaus’ contribution so I came up with a simple form that you can use to generate the markup for the tabs.

Instructions:

It’s very simple. Just type a name for each tab (up to 5) and click the button at the bottom of the form. The next page will generate the html you can copy and paste into your file.

You will also need to download the CSS from Klaus’ site, modify it as you see fit, and of course upload the jQuery javascript library to your server.

Here is the link for the tab markup generator.

Enjoy.