Vertical Tabs Using JQuery

Very often you have seen jquery UI tabs used horizontally, like in the following image. But easily we can create Vertical Tabs in our project?

How to create Vertical Tabs Using JQuery?

Here I will explain how to create a vertical tabs using jQuery.

When we create Vertical Tabs, we have to think about three things. We will see the steps one by one

First is HTML required for the Vertical Tabs using jQuery

<div id="verticaltab">
    <ul>
       <li class="tabs selected"><a href="#">Tab One</a></li>
       <li class="tabs"><a href="#">Tab Two</a></li>
       <li class="tabs"><a href="#">Tab Three</a></li>
       <li class="tabs"><a href="#">Tab Four</a></li>
   </ul>
   <div>
      <h4>This is the first tab</h4>
      <p>Content Goes here..</p>
   </div>
   <div>
      <h4>This is the second tab</h4>
      <p>Content Goes here..</p>
   </div>
   <div>
      <h4>This is the Third tab</h4>
      <p>Content Goes here..</p>
   </div>
   <div>
      <h4>This is the Fourth tab</h4>
      <p>Content Goes here..</p>
   </div>
</div>

Here ‘ul’ part is the navigation for the content under each vertical tabs. Content goes inside the div tags.

Second is CSS required for the Vertical Tabs

We will add the necessary css for making the alignment and look and feel of the Vertical Tabs.

#verticaltab {
            margin: auto;
            width: 800px;
            height: 100%;
        }
        #verticaltab > ul > li {
            width: 110px;
            height: 40px;
            background-color: #fff !important;
            list-style-type: none;
            display: block;
            text-align: center;
            margin: auto;
            padding-bottom: 10px;
            border: 1px solid #cdcdcd;
			border-bottom: 0;
            position: relative;
            border-right: none;
        }
		#verticaltab > ul > li a { 
			font-size: 13px;
			line-height: 45px;
			text-decoration: none;
			color: #0da2be;
			font-weight: bold;
		}
		#verticaltab > ul > li.selected a, #verticaltab > ul > li a:hover {
			color: #2F4F4F;
		}
		#verticaltab > ul > li.tabs {
            background: #F0FFF0;
        }
        #verticaltab > ul > li.selected {
            z-index: 10;
            background-color: #fafafa !important;
            position: relative;

        }
        #verticaltab > ul {
            float: left;
            width: 110px;
            text-align: left;
            display: block;
            margin: auto 0;
            padding: 0;
            position: relative;
        }
        #verticaltab > div {
            background-color: #fafafa;
            margin-left: 110px;
            border: 1px solid #ddd;
            min-height: 500px;
            padding: 12px;
            position: relative;
            z-index: 9;
            border-radius: 0 20px 20px 20px;
        }
        #verticaltab > div > h4 {
            color: #2F4F4F;
            font-size: 1.2em;
            padding-top: 5px;
            margin-top: 0;
        }
        #verticaltab > div p { font-size: 0.9em; color: #7f7f7f;}

Third is jQuery required for the Vertical Tab

$(function() {
            var $items = $('#vtab>ul>li');
            $items.mouseover(function() {
                $items.removeClass('selected');
                $(this).addClass('selected');

                var index = $items.index($(this));
                $('#vtab>div').hide().eq(index).show();
            }).eq(1).mouseover();
        });

Just copy this code for Vertical Tabs and past in your page and jquery plugin and check the vertical tabs working in your page.

You can also download the code for vertical Tabs here tabs.zip