Vertical tab component on jQuery user interface site

Question

jQuery UI has a beautiful “vertical tab” widget for switching between chapters on its own website.

Does anyone know if this is based on some kind of standard widget (would you expect it to use its own user interface “tabs”, but without cubes!), Or is it what is custom made? A quick look at the code makes me suspect the last ..... This is very convenient in the project I'm working on.

Answer 1

This is a user interface tab widget: http://jqueryui.com/demos/tabs/

You can easily put your vertical tabs with css because you can define an unordered list, customize it to your needs and add the magic of user interface tabs. Here are some really basic styles ... http://jsfiddle.net/CR6Eg/

<li class="ui-tabs-nav-item"> <a href="#fragment-slide-1"><span>Volutpat ut wisi enim</a> </li> <li class="ui-tabs-nav-item"> <a href="#fragment-slide-2"><span>Volutpat ut wisi enim</a> </li> <div class="ui-tabs-panel" id="fragment-slide-1" style=""> <p>content</p> </div> <div class="ui-tabs-panel" id="fragment-slide-2" style=""> <p>content</p> </div>