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?

Vertical Tabs

How to create Vertical Tabs Using JQuery?

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

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.

Demo for Vertical Tab using Jquery

Tool Tips with CSS

5 thoughts on “Responsive Table with CSS Media Queries

  1. Hi thanks for this post! I am trying to get iphone 5 to work with displaying a table that I’ve used as follows: http://tasteandsee.com/holiday-gift-guide-for-the-cook/

    I have tried a few different media queries specific to 320px width but to no avail.

    You will see I am not using the table as a traditional data table, instead it is a manual build of a shopping page so it has product images and links to purchase, etc. There are no header rows and so on.

    Is there a way to use a media query to get this table to display in a single column on smartphone w/320px width, such as iphone 5?

    Thank you!!

Leave a Reply

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