jQuery UI – Vertical Tabs


To make JQuery UI tabs vertical, you may need to do small change in .JS and .css …. Changes are as below –

JS

<script>
$(function() {
$( “#tabs” ).tabs().addClass( “ui-tabs-vertical ui-helper-clearfix” );
$( “#tabs li” ).removeClass( “ui-corner-top” ).addClass( “ui-corner-left” );
});
</script>

 

.CSS  (Copy/Paste this style in your page where you have vertical tab)

<style>
.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 .2em 0; }
.ui-tabs-vertical .ui-tabs-nav li a { display:block; }
.ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected { 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: 40em;}
</style>

HTML

<div id=”tabs”>
<ul>
<li><a href=”#tabs-1″>Nunc tincidunt</a></li>
<li><a href=”#tabs-2″>Proin dolor</a></li>
<li><a href=”#tabs-3″>Aenean lacinia</a></li>
</ul>
<div id=”tabs-1″>
(1)
</div>
<div id=”tabs-2″>
(2)
</div>
<div id=”tabs-3″>
(3)
</div>
</div>

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s