jQuery UI includes a tabs widget that makes it easy to add tab panels to your web applications.  Out-of-the-box, it currently only supports horizontal tab strips across the top of the content, like so:

There are samples in the jQuery UI code that show how you can easily achieve either side (vertical) tabs or bottom (horizontal) layouts with some simple jQuery and CSS, but I didn’t want to have to copy-and-paste the code every time I needed non-standard tab layouts.  I’ve packaged the styles and script up into the superTabs library which introduces two new jQuery plug-in methods:

$("#verticalTabs").verticalTabs();

$("#bottomTabs").bottomTabs();

These take the standard jQuery UI tabs options.  Here’s the tabs widget with vertical tabs:

And here are bottom tabs:

You can see a demo in action or download the code.  Enjoy!

Tags: