Creating Vertical tabs

Hi dears,

I am using uiTabs of JQuery.

How to create Vertical tabs?


I have tried to create the Tabs vertically but I am facing a problem.

I think there is a need to modify the base class CJuiTabs.php

There is need to add one more variable that will store the information about the style i.e. Display as Vertical or Horizontal.

if we define a variable named TabMode as such

public $tabMode='default'; // Which is by default Horizontal 

public $addiing_class='';

public $chaning_new='';

and this can be accessed as


			$addiing_class=".addclass('ui-tabs-vertical ui-helper-clearfix')";

			$chaning_new="jQuery(\"#{$id} li\").removeClass('ui-corner-top').addClass('ui-corner-left');";			



The CSS that I ma currently using is

.ui-tabs-vertical {

    width: 55em;


.ui-tabs-vertical .ui-tabs-nav {

    float: left;

    padding: 0.2em 0.1em 0.2em 0.2em;

    width: 12em;


.ui-tabs-vertical .ui-tabs-nav li {

    border-bottom-width: 1px !important;

    border-right-width: 0 !important;

    clear: left;

    margin: 0 -1px 0.2em 0;

    width: 100%;


.ui-tabs-vertical .ui-tabs-nav li a {

    display: block;


.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected {

    border-right-width: 1px;

    padding-bottom: 0;

    padding-right: 0.1em;


.ui-tabs-vertical .ui-tabs-panel {

    float: right;

    padding: 1em;

    width: 40em;


any help will be welcomed.