Vertical "tab" component on jQuery UI site

Question

jQuery UI features a nice-looking "vertical tabbing" widget to switch between chapters on its own website.

Does anybody know whether this builds on some kind of standard widget (you would expect that UI's very own "tabs" component is being used for this, but no dice!), or whether it is something custom made? A cursory glance at the code makes me suspect the latter..... This would come in very handy in a project I'm working on.

Answer 1

It is the UI Tabs Widget: http://jqueryui.com/demos/tabs/

You can Style your vertical tabs with css in an easy Way because you can define an unordered list, style it to your needs and add UI Tabs magic. Here is some really basic styling... 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>