Home » Jquery » Vertical Tabs Using JQuery

Vertical Tabs Using JQuery

Very often you have seen jquery UI tabs used horizontally, like in the following image.

horizontal

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

Vertical

When we create this, we have to think about three things. We will go one by one

First is HTML required for the Vertical Tab 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 tab. Content goes inside the div tags.

Second is CSS required for the Vertical Tab

#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();
        });

Demo for Vertical Tab using Jquery

Tool Tips with CSS

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*