jQuery UI の Tabs は通常 横（水平）方向に作成されますが、縦（垂直）方向のタブを作成したくなりGoogleで調べました。
サンプルを元に作ってみるも、とりあえずミニマムでは動作するが、ちょっと凝った事をしようとするとダメだったのでカスタマイズしたメモです。
水平Tab
jQuery UI 公式サイト のサンプル通りですね。
<script>
$( function() {
$( "#tabs" ).tabs();
} );
</script><div id="tabs">
<ul>
<li><a href="#tabs-1">panel 1</a></li>
<li><a href="#tabs-2">panel 2</a></li>
<li><a href="#tabs-3">panel 3</a></li>
</ul>
<div id="tabs-1">
<p>simple</p>
</div>
<div id="tabs-2">
<p>text only</p>
</div>
<div id="tabs-3">
<p>panel 3</p>
</div>
</div>垂直Tab
Googleで調べたらいくつか見つかりました。
jQuery UI の Tabs で作る縦並びのタブ型メニュー
http://alphasis.info/2013/04/jquery-ui-tabs-vertical/
jQuery UI Vertical Tabs - JSFiddle
http://jsfiddle.net/tj_vantoll/nn2Qw/?fbclid=IwAR3gYzWXAjzV5poGQdwxd2WEYEARQAvyBXHJfkFM35W6NouIIumadwN53DU
ui-tabs-vertical クラスのCSSを定義し、tabs指定時にクラスを設定する方式です。
.ui-tabs-vertical {
width: 55em;
}
.ui-tabs-vertical .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left; width: 12em;
}
.ui-tabs-vertical .ui-tabs-nav li {
clear: left; width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px 0.2em 0;
}
.ui-tabs-vertical .ui-tabs-nav li a {
display:block;
width: 10em;
}
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
.ui-tabs-vertical .ui-tabs-panel {
padding: 1em;
float: right;
width: 35em;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
margin-bottom: 0.2em;
}<script>
$( function() {
$("#tabs")
.tabs()
.addClass("ui-tabs-vertical ui-helper-clearfix")
.find("li")
.removeClass("ui-corner-top")
.addClass("ui-corner-left");
} );
</script>GitHub Pages：サンプル vertical.html
しかし少し不具合があります。
どんな不具合があるかと言うとタブを多重化・多層化した際に、子孫まで影響し垂直タブの中に水平タブを設置しようとしても、必ず垂直タブになってしまいます。
ダメなケース 垂直タブの中に水平タブを設置する
GitHub Pages：サンプル vertical-tab-multiplexing-bad-case.html
垂直Tab 修正版
jQueryのセレクターでは、findを使用し子孫まで指定しているため、childrenを使用し、子供に限定します。
<script>
$( function() {
$("#tabs")
.tabs()
.addClass("ui-tabs-vertical ui-helper-clearfix")
.children("ul > li") // .find("li")
.removeClass("ui-corner-top")
.addClass("ui-corner-left");
} );
</script>次に CSS も 影響範囲を限定していきます。
.ui-tabs-vertical {
width: 55em;
}
/* .ui-tabs-vertical .ui-tabs-nav { */
.ui-tabs-vertical > .ui-tabs-nav {
padding: .2em .1em .2em .2em;
float: left; width: 12em;
}
/* .ui-tabs-vertical .ui-tabs-nav li { */
.ui-tabs-vertical > .ui-tabs-nav > li {
clear: left; width: 100%;
border-bottom-width: 1px !important;
border-right-width: 0 !important;
margin: 0 -1px 0.2em 0;
}
/* .ui-tabs-vertical .ui-tabs-nav li a { */
.ui-tabs-vertical > .ui-tabs-nav > li > a {
display:block;
width: 10em;
}
/* .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { */
.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
padding-bottom: 0;
padding-right: .1em;
border-right-width: 1px;
border-right-width: 1px;
}
/* .ui-tabs-vertical .ui-tabs-panel { */
.ui-tabs-vertical > .ui-tabs-panel {
padding: 1em;
float: right;
width: 35em;
}
/* .ui-tabs .ui-tabs-nav li.ui-tabs-active { */
.ui-tabs.ui-tabs-vertical > .ui-tabs-nav > li.ui-tabs-active {
margin-bottom: 0.2em;
}