Create an Awesome Vertical Tabbed Content Area using CSS3 & jQuery

Posted by | May 18, 2012 | CSS, JavaScript, Web Development | 97 Comments
featured_vertical_tab_icon


Demo

Vertical Tabbed Content Area

Vertical tabbed content area separates content into different and structured panes, and each content can be viewed one at a time. So it’s a nice and clean way to show specific content. In this article we will be writing how to create a slick vertical tabbed content area which can be converted to an jQuery vertical tabs plugin ( I will post it in my upcoming post about how to create jQuery plugin). Lets get started. First we create the structure of our tab and content area using HTML. After that we are going to style it with css and apply css3 transition effects to animate the mouse click on tabs, and then finally We will use jQuery to make tab elements clickable and slideToggle (hide/show) the content area.

The HTML

Let’s look at the basic layout of the tabs and content divs. We also adding some extra styles for older IE browsers in the head.

index.html

                <!doctype html>

<meta charset="utf-8" />
Create an Awesome Vertical Tabbed Content Area using CSS3 & jQuery | FarDesign.net

            <!-- Include Styles -->
            	<link href="assets/css/styles.css" rel="stylesheet" />
            <!--[if IE 7]>
<style type="text/css">#v-nav>ul>li.current{border-right:1px solid #fff!important}#v-nav>div.tab-content{z-index:-1!important;left:0}</style>
<![endif]-->
            <!--[if IE 8]>
<style type="text/css">#v-nav>ul>li.current{border-right:1px solid #fff!important}#v-nav>div.tab-content{z-index:-1!important;left:0}</style>
<![endif]--></pre>
<section class="wrapper" id="wrapper">
<h1 class="title">Vertical Tabbed Content Area</h1>
<div id="v-nav">
<ul>
	<li class="first current">Design</li>
	<li>Specs</li>
	<li>Price</li>
	<li class="last">Release Date</li>
</ul>
<div class="tab-content">
<h4>Design</h4>
</div>
<div class="tab-content">
<h4>Specs</h4>
</div>
<div class="tab-content">
<h4>Price</h4>
</div>
<div class="tab-content">
<h4>Release Date</h4>
</div>
</div>
</section>
<pre>
            <!-- Include Scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript" src="http://benalman.com/code/projects/jquery-hashchange/jquery.ba-hashchange.js"></script>
<script type="text/javascript" src="assets/js/script.js"></script>


 

The CSS

We are using a number of CSS3 properties to give our vertical tabbed content area a skinny slick look, some of which may not be fully supported yet in all browsers. It will work and look great on older browsers as well. The following CSS3 properties are used:

  • Box Shadow
  • Text Shadow
  • CSS Gradients
  • CSS Transitions

There is a great list of which browsers currently support CSS3 properties at the following link: Web Designers’ HTML5 & CSS3 Checklist

assets/css/styles.css

body
{
    background-color: #f7f7f7;
}

.wrapper
{
    width: 960px;
    margin: 0px auto;
    padding-top: 20px;
    min-height: 600px;
}

.wrapper h1, .wrapper h4, .wrapper p, .wrapper pre, .wrapper ul, .wrapper li
{
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    background: transparent;
}

.wrapper li
{
    outline: 0;
    text-decoration: none;
    -webkit-transition-property: background color;
    -moz-transition-property: background color;
    -o-transition-property: background color;
    -ms-transition-property: background color;
    transition-property: background color;
    -webkit-transition-duration: 0.12s;
    -moz-transition-duration: 0.12s;
    -o-transition-duration: 0.12s;
    -ms-transition-duration: 0.12s;
    transition-duration: 0.12s;
    -webkit-transition-timing-function: ease-out;
    -moz-transition-timing-function: ease-out;
    -o-transition-timing-function: ease-out;
    -ms-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

#v-nav
{
    height: 100%;
    margin: auto;
    color: #333;
    font: 12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
}

#v-nav >ul
{
    float: left;
    width: 210px;
    display: block;
    position: relative;
    top: 0;
    border: 1px solid #DDD;
    border-right-width: 0;
    margin: auto 0 !important;
    padding:0;
}

#v-nav >ul >li
{
    width: 180px;
    list-style-type: none;
    display: block;
    text-shadow: 0px 1px 1px #F2F1F0;
    font-size: 1.11em;
    position: relative;
    border-right-width: 0;
    border-bottom: 1px solid #DDD;
    margin: auto;
    padding: 10px 15px !important;
    background: whiteSmoke; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #f2f2f2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* IE10+ */
    background: linear-gradient(top, #ffffff 0%, #f2f2f2 100%); /* W3C */
}

#v-nav >ul >li.current
{
    color: black;
    border-right: none;
    z-index: 10;
    background: white !important;
    position: relative;
    moz-box-shadow: inset 0 0 35px 5px #fafbfd;
    -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
    box-shadow: inset 0 0 35px 5px #fafbfd;
}

#v-nav >ul >li.first.current
{
    border-bottom: 1px solid #DDD;
}

#v-nav >ul >li.last
{
    border-bottom: none;
}

#v-nav >div.tab-content
{
    margin-left: 210px;
    border: 1px solid #ddd;
    background-color: #FFF;
    min-height: 400px;
    position: relative;
    z-index: 9;
    padding: 12px;
    moz-box-shadow: inset 0 0 35px 5px #fafbfd;
    -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
    box-shadow: inset 0 0 35px 5px #fafbfd;
    display: none;
    padding: 25px;
}

#v-nav >div.tab-content >h4
{
    font-size: 1.2em;
    color: Black;
    text-shadow: 0px 1px 1px #F2F1F0;
    border-bottom: 1px dotted #EEEDED;
    padding-top: 5px;
    padding-bottom: 5px;
}

The jQuery Code

We are using jQuery framework for manipulating the click event of our vertical tabbed content area. This code can be changed and converted to an jQuery vertical tabs plugin.

assets/js/script.js
$(function () {
    var items = $('#v-nav>ul>li').each(function () {
        $(this).click(function () {
            //remove previous class and add it to clicked tab
            items.removeClass('current');
            $(this).addClass('current');

            //hide all content divs and show current one
            $('#v-nav>div.tab-content').hide().eq(items.index($(this))).show('fast');

            window.location.hash = $(this).attr('tab');
        });
    });

    if (location.hash) {
        showTab(location.hash);
    }
    else {
        showTab("tab1");
    }

    function showTab(tab) {
        $("#v-nav ul li
			
Empty section. Edit page to add content here.
").click(); } // Bind the event hashchange, using jquery-hashchange-plugin $(window).hashchange(function () { showTab(location.hash.replace("#", "")); }) // Trigger the event hashchange on page load, using jquery-hashchange-plugin $(window).hashchange(); });

We are not going to get into the details of the CSS3 or jQuery. Note: the version used in this article is jQuery 1.7.2 and jQuery hashchange event – version v1.3 – 7/21/2010

Wrapping Up

With this our vertical tabbed content area is complete! I like to put all of JavaScript and CSS in a separate file styles.css and script.js. It works on all modern web browsers and mobile devices. Firefox, Safari and Chrome and pretty good on IE (also on old IE browsers).Note: Some CSS3 features are not supported in older versions of Opera and versions of Internet Explorer.


vertical tabbed content area - jquery vertical tabs

avatar

About Farid

Creative web developer/designer, big fan of HTML5, CSS3 and client-side development. Lead software developer at Allegra Strategies London.

  • http://www.faridesign.net/ Farid Hayati

    Your probably not including the hashchange plugin, the following script should be included between head tag of your document.

  • Vin

    Hi, is it possible make the content box running with the auto rotation effect?
    Please advise, thanks :)

  • sunil

    can we use nested list in it ???

  • sunil

    hii i am using same script but i want to open tab through nested list will it be possible…???? plz help

  • http://www.faridesign.net/ Farid Hayati

    Do you mean nested vertical tabs?

  • YIQIAN Low

    Great works. I need multiple v-nav in same page. Is that possible to do so?

  • http://www.faridesign.net/ Farid Hayati

    Yes, you can give them different ids and duplicated some the js code and adjust it.

  • awalton1

    Is it possible to close content when not hovering over tab? Thank you.

  • http://www.faridesign.net/ Farid Hayati

    You do it with something like this. replace click part in each loop with the following:

    $(this).mouseenter(function(){
    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).show(‘fast’);
    }).mouseleave(function(){
    $(‘#v-nav>div.tab-content’).hide();
    });

  • Chad

    Farid,

    This is excellent. I like how it requires minimal markup and CSS styles to work. I am running into one snag. I did not change any of the code except for changing #v-nav to .vTabs and div.tab-content to .vTabsContent in the jQuery code.

    The current tab1 content fails to appear after page load. I must click the first tab to make the content appear.

    Thanks for your time, and this is the best vertical jQuery tab menu I have found. This would be easy to use as a horizontal menu too with some adjustments to the CSS.

    Chad

  • Danilo

    Wow, this tutorial and menu effect is really great. The markup (which is as simple as it can get) and the css are very readable, as well as the jQuery code. Really appreciate this.

  • http://www.faridesign.net/ Farid Hayati

    Thank you

  • http://www.faridesign.net/ Farid Hayati

    You have to replace also everything in the css and in jQuery code. in css replace #v-nav to .vTabs and .tab-content to .vTabsContent. Also make the same modification in the jQuery code.

    For horizontal tabs you have to make changes in the css and the jQuery code stays the same.

  • surabhi

    Hi,
    Very nice piece of code. It is really very helpfull. But can you please tell me how to restore my “browser’s back button” functionality. When I click on the back button, it gets stuck into a loop of the tabs. Please help. Thanks

  • http://www.faridesign.net/ Farid Hayati

    The tabs are based on the url hash. So each time you click on a tab it will be added to the browser history. When you click on browser back button, it will go back in the browser history. If you don’t want that, replace the jQuery code with following:

    $(function () {

    var items = $(‘#v-nav>ul>li’).each(function () {
    $(this).click(function () {
    //remove previous class and add it to clicked tab
    items.removeClass(‘current’);
    $(this).addClass(‘current’);

    //hide all content divs and show current one
    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).show(‘fast’);
    showTab($(this).attr(‘tab’));
    });
    });
    showTab(“tab1″);
    function showTab(tab) {
    $(“#v-nav ul li:[tab=" + tab + "]“).click();
    }
    });

    I didn’t test the code.

  • Michael Prewitt

    I got this to work using the version of Jquery used in your demo, but it fails with Jquery 1.8.3. I read a post below about changing the line that reads “$(“#v-nav ul li:[tab*=" + tab + "]“).click();”, and I changed it as you suggested. But it still does not display the tab-content area and does not function.

  • Massimiliano

    Problem with VerticalTab and Google Map!!!

    Hello, sorry for my english.

    Congratulations for your wonderful script.

    I have tried to use it here: cheapest authentic viagra

    Everything works fine, but the Google Map that is present on the second Tab, has display problems. In fact, a good part of the map, is out of his area and does not display correctly.
    Here you can find a problem’s ScreenShot (https://dl.dropbox.com/u/227949/VT/verticalTabAndMap.png)

    I have tried several times to figure out who is responsible for this behavior, the CSS or Javascript, but I just can not figure it out.
    Surely, however, by removing the class v-nav from id=’v-nav’> the map is displayed properly …

    Can you help me figure out where the problem may lie?

    This is the JavaScript used by me

    $(function () {
    var items = $(‘#v-nav>ul>li’).each(function () {
    $(this).click(function () {
    //remove previous class and add it to clicked tab
    items.removeClass(‘current’);
    $(this).addClass(‘current’);
    $(‘#v-nav>div.tab-content’).hide(); //.eq(items.index($(this))).show(‘fast’);
    $(‘#’ + $(this).attr(“tab”)).show(‘fast’);
    window.location.hash = $(this).attr(‘tab’);
    });
    });

    if (location.hash) {
    showTab(location.hash);
    }
    else {
    showTab(“tabmanifestazione”);
    }

    function showTab(tab) {
    $(“#v-nav ul li:[tab*=" + tab + "]“).click();
    }

    $(window).hashchange(function () {
    showTab(location.hash.replace(“#”, “”));
    })

    $(window).hashchange();

    });

  • adfued

    it work tq :)

  • Garth

    Farid – thanks for the great work, man. Exactly what I was looking for in terms of design; clean and simple, and nice streamlined css and js. Thanks!!

  • http://www.facebook.com/george.strnad George Strnad

    I want to buy this ASAP, but, I need to know if it will work inside a WordPress Page, specifically on one page only, not the main one. Secondly, can you have nested div’s on here? I’m presently using Domtabs and nested div’s dont’ work. Please let me know asap and I will purchase if those are both “yes”

  • http://www.faridesign.net/ Farid Hayati

    Hi George,

    Yes you can have nested tabs. But it’s not a wordpress plugin. If you want to use it in wordpress, you need include js and css manually.

  • http://www.faridesign.net/ Farid Hayati

    Thanks you

  • Paul Monarc

    Anyway to have multiple instances on page?

    I have created two different tabs, style attributes, and copied the code (changing the IDs the code is effecting) but it wont work.

  • Yousuf Kamal

    Hi !

    First of all, a great tutorial! You have helped us a lot! Thanks!

    second, I made sure to change all v-tab tags to my own in all css and js.

    But for somewhat reason, the tab1 still doesn’t show up on page load!

    Could you kindly take a look at http://www.ekushe-it.org/services.html and let me know what I should do?
    Thanks! I await eagerly.

  • http://www.faridesign.net/ Farid Hayati

    Your using newer version jQuery. Change the attribute selector in showtab.

    function showTab(tab) {
    $(“#servicesTabs ul li:[tab=" + tab + "]“).click();
    }

    should be:

    function showTab(tab) {
    $(“#servicesTabs ul li[tab=" + tab + "]“).click();
    }

  • http://www.faridesign.net/ Farid Hayati

    For multiple instance you should check or disable the hashchange features.

  • http://www.faridesign.net/ Farid Hayati

    “$(“#v-nav ul li:[tab*=" + tab + "]“).click();

    replace it with this :

    “$(“#v-nav ul li[tab=" + tab + "]“).click();

  • Yousuf Kamal

    wow!
    Amazing!
    Solved!!

    Great!!!!

    But tell me, how much did it take you to figure this out!!

    Thanks!

  • Yousuf Kamal

    Another issue, I hope you will be kind again to help me out with the problem.
    when the browser window is fully wide, everything appears normal.

    but when resized even a little, the tab-content boxes move left (please see the screenshot).

    I have checked every CSS rules but none seem to imply on this. Could this be for the js?
    Please let me know.

    You have been very kind.

  • http://www.faridesign.net/ Farid Hayati

    Are you going to pay me :P

  • http://www.faridesign.net/ Farid Hayati

    It’s css issue because the values for width are in pixels. What you can do is use media queries to change the width in different break points or by using percentages instead of pixels for width and margin.

    change the css for ul, li, and content to percentage. Something like that:

    #v-nav >ul {width: 25%;}

    #v-nav >ul >li {width: auto;}

    #v-nav >div.tab-content {margin-left: 25%;}

  • threemalee

    I liked this tutorial very much and i’m thinking of using this this in my assignment, but sir i have an issue with the way the tabs open,(it doesn’t open the same way as showed in the demo) i’ll give the link below. If anyone can help me i’ll truly grateful. Thank You in advance http://92.48.118.201/~skytrial/new_test_snh/#tab1

  • Alek Ruiz

    Hello!
    Is there a way to disable the transition effect of the content using a newer jquery version?

    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).show(”); works with the 1.9.1 and it disables the transition effect but does not seems to work with the 1.10.0
    Any ideas?

  • Peter

    Hi

    It’s possible change the effect “hide to show” for one smilar like this?
    http://tabs.rolandshield.com/vertical.html

    Thanks!

  • Tobe Eze

    Wow. This is exactly what I have been looking for. Is there a way to load the tab text from a database and then when a tab is clicked. the tab contents are also loaded from a database. Something in asp.net + c#

  • jean berbard

    Hi Farid, this is by far the cheapest authentic viagra i found. But i can’t make it works @ 100%, my first tab won’t open at the page loading and every hash are like “#undefined”. I’ve read other comments but it seems that i use the right jQuery version with the fix you posted few month ago. Thanks for your help (if you need my page is http://clients2cle.fr/content/18-location)

  • karnati bharath

    Hello sir,
    This tutorial is Awesome . I am a Beginner , i am able to try in project .
    I am created as it is , but i got couple of doubts
    1.I added header and footer ,i want to fix the footer without any moving ,can you please help me out?

    2. I am adding jQuery UI Accordion in the content section , it’s not working .will you guide me sir.

    Last but not least is code for horizontal tabbed , which can be more helping for completion of second project which i have to modify.
    maild id: karnati111@gmail.com

    please sir , i asked silly question as i am beginner , will you please guide me.

  • Charles

    Is it possible to turn this into a horizontal tab? Looks great.

  • Apple

    Thank you! this is easy. thank you so much.

  • http://www.faridesign.net/ Farid Hayati

    Your welcome

  • http://www.faridesign.net/ Farid Hayati

    Yes, you need to add a few css tweaks. First the li tag should be floated for horizontal tabs. I will post more tutorials on how to create tabs in the future posts.

  • Jay

    a bit late, but for people who might be interested , this is the part of code to change

    #v-nav >div.tab-content
    {
    margin-left: 210px;
    border: 1px solid #ddd;
    background-color: #FFF;
    min-height: 800px; <————– change here
    position: relative;
    z-index: 9;
    padding: 12px;
    moz-box-shadow: inset 0 0 35px 5px #fafbfd;
    -webkit-box-shadow: inset 0 0 35px 5px #fafbfd;
    box-shadow: inset 0 0 35px 5px #fafbfd;
    display: none;
    padding: 25px;
    }

  • Ott3r

    This is a really good tutorial. The issue I’m having is that when the content in the content box exceeds the 400 px min-height there are some funky movements of the whole menu and content holder. The left nav will shift a few pixels to the right while the content loads, then it goes back to it’s original position. This also happens when the min-height is changed to 800 px like suggested above. Except it happens on every content box.

  • PKDon

    Great way to get vertical tabs.I have copied the same code as above ,but when i try to run it the first tab isn’t loaded until clicked.
    When i click other tab #undefined is appended at the end of the url instead of #tab1 or #tab2.
    please help me out here

  • pkdon

    replace function showTab(tab) {
    $(“#v-nav ul li:[tab*=" + tab + "]“).click();
    }
    with
    function showTab(tab) {
    $(“#v-nav ul li[tab*=" + tab + "]“).click();
    }

  • Falkon

    Hi Farid
    Thank you so much for your great input.
    Somehow this does not work within a bootstrap template. Am I doing something wrong or this is not set up to work with bootstrap?

    Thanks again
    Falkon

  • Falkon

    hi, sorry a bit confused here, I am new to JS and can not seem to understand the the function you are referring to is written this way:
    function showTab(tab) {
    $(“#v-nav ul li
    Empty section. Edit page to add content here.
    “).click();
    }

    and you are showing the code above without the div tags that are mentioned in the actual js file.
    so I should delete the div tag and replace it with the code you wrote?
    please help me understand this/
    Thank you in advance
    Falkon