Create an Awesome Vertical Tabbed Content Area using CSS3 & jQuery

Posted by | May 18, 2012 | CSS, JavaScript, Web Development | 99 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

To the absolute sildenafil online usa of a few months you commit like a person in coLab, reverting to some month-to- after the 3 month period's end.

avatar

About Farid

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

  • harindu95

    Can you tell me how can i add this to blogger?

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

    I have combined the css, html and javascript into one file. You can copy past it anywhere in your blog/post. Make sure the editor is in HTML mode.

     
    <!-- begin code -->
     
    <!-- Add css style, it would be better to add this style block in separate file and include on the top -->
     
        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 &gt;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 &gt;ul &gt;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 &gt;ul &gt;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 &gt;ul &gt;li.first.current
        {
            border-bottom: 1px solid #DDD;
        }
     
        #v-nav &gt;ul &gt;li.last
        {
            border-bottom: none;
        }
     
        #v-nav &gt;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 &gt;div.tab-content &gt;h4
        {
            font-size: 1.2em;
            color: Black;
            text-shadow: 0px 1px 1px #F2F1F0;
            border-bottom: 1px dotted #EEEDED;
            padding-top: 5px;
            padding-bottom: 5px;
        }
     
     
     
    Apple iPhone 5
     
     
     
     
            Design
            Specs
            Price
            Release Date
     
     
     
            Design
     
     
     
            Specs
     
     
     
            Price
     
     
     
            Release Date
     
     
     
     
    <!-- Include jQuery -->
     
    <!-- Add javascript, it would be better to add this script block in separate file and include after jQuery is included-->
     
        $(function () {
            var items = $('#v-nav&gt;ul&gt;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&gt;div.tab-content').hide().eq(items.index($(this))).show('fast');
                });
            });
     
            // select the first tab on page load       
            items[0].click();
        });

  • huumm

    Great article !!!
    This works perfectly with IE and Firefox. Using Safari (ver 5.1.7) for Mac, the content on the right side area of the first item does not show when the page load. If I click on the menu then the content display. Is there any work around for this ?

    13 // select the first tab on page load
    14 items[0].click();

    Thanks.

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

    Replace the code on line 14 with the following:

    $(“#v-nav ul li:nth-child(1)”).click();

  • huumm

    WORK PERFECTLY !!!!

  • Bangers

    This looks great but I was wondering – is there any easy way to change the jquery so a tab can be opened via another link on the page. I sure someone could figure it out but I can’t.

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

    Step:1
    I have added jquery-hashchange-plugin from Ben Alman. Make sure you include jquery-hashchange-plugin after jQuery.

    Step:2
    Replace all script with the follwoing:

    $(function () {
        var items = $('#v-nav&gt;ul&gt;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&gt;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:[tab*=" + tab + "]").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();
    });

    Step:3
    Finally add a “tab” attribute to li element.

     
     
                Design
                Specs
                Price
                Release Date
     
     
                Design
     
     
                Specs
     
     
                Price
     
     
                Release Date
  • Bangers

    Many thanks I will have a go with your very clear instructions, cheers :)

  • Eileen Schmidtke

    I love this, exactly what I needed and easy to modify. Thank you! Just one question, how would you add a hover state to the tabs so they highlight before clicking like a button effect? Im something simple just bolding or changing color of text. The lack of tag has thrown me a bit…

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

    Add this css block code to your style file.

    #v-nav ul li:hover
    {
    background: whiteSmoke;
    color: #08C;
    }

    It will change the background color and text when hovering with mouse.

    You can also add the following to change cursor when hovering with mouse.

    #v-nav >ul >li
    {
    cursor: hand; cursor: pointer;
    }

  • Pingback: jQuery Plugin: Awesome Tabs | FariDesign.net

  • SRandall

    This is great. I have added it to my website. Thanks you

  • Jamie

    With the jquery code do I just add it to the jquery script or do I create a new script, sorry I’m new to this.

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

    Create a new script.js file and add the jQuery code to it, make sure you include jQuery before your script.js. You can download the full source code and have a look at how it is done.

  • LukaKaramarko

    How can we disable sliding of content from left to right when clicked on tab? Or tu use just fade in/out

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

    replace this javascript line of code:
    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).show(‘fast’);

    with this one (fadein):
    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).fadeIn(100);

    or this one to disable the animation:
    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).show();

  • Katia

    Hi! Instead of showing the tabs when clicking, how can I change to mouse over?

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

    replace this javascript line of code:
    $(this).click(function () {

    with this one (mouseenter):
    $(this).mouseenter(function () {

  • http://www.facebook.com/ibassey Isaac Bassey

    Hi
    I have added the code to a text widget on my site and it shows as it should but the issue I am having is my quick slider at the top of the page disappears.

    Can anyone help.
    Thanks

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

    can you give a live link.

  • Katia

    Oh tks :) it works perfectly

  • CK

    First, thanks for this menu. It’s really great!

    When I perform the mouse over code change, it works great, except when the page is initially loaded tab1 does not display by default. I have to mouse over the menu to get it to show. It doesn’t look like hashchange isn’t working on page load. I hope i’m explaining this enough. Thanks again!

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

    the function showTab calls link click method. We didn’t change that. it should be mouseenter as well.

    so replace the function with this:

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

  • CK

    Worked like a charm, thanks!

  • http://www.facebook.com/philipsacht Philip Fredericia Sacht

    i posted a question last night, but it doesn’t seem to have been registred??
    ohh well. i’ll try again.

    first off, i wanna thank you for this excellent piece of coding.
    gracias amigo.

    next off, i wanna ask you a question about a second menu option.

    Q: if i want to have a second menu horizontal, pointing into the same content-area as your menu, how would that be done?
    EX: a horizontal menu continueing from #tab5-#tab9 (see link)

    http://www.firmagaver.info/jupgrade/
    link to my site. see below banner this sentence.
    “THIS SHOULD BE A SECOND MENU LINKING TO SAME CONTENT AREA AS THE LEFT”

    thank you mister!

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

    I don’t know if I understand you correctly. but I assume you need separate menu horizontally.

    This isn’t too difficult but it’s definitely not straightforward, I think I can point you in the right direction.

    First you should duplicate the html, css and javascript. After that your going to make changes:

    html:
    give the div wrapper (“v-nav”) a different id so you can style it and and select it from your jquery code.

    css:
    Complete css of the horizontal menu will be diferent. for example the li style will use display inline or float left.

    javascript:
    This stays the same except the jquery selectors. you need replace the v-nav with the new id of the horziontal tab.

  • http://www.facebook.com/philipsacht Philip Fredericia Sacht

    sure. all this is right, but if i want both menues, vertical and horizontal to use the same content area… so if you’d press a button in menu1 and/or menu2 the result would place in same content area.

    basicly its the same menu you have created just with a additional menu pointing to the same area of content. you follow?

    so how do you get menu1 (vertical) to understand that there is a menu2 that also places content in the same area wihtout conflict.

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

    your almost there, right the content is showing based on the li index. this should find the content based on tab attribute which will be the unique id of the tab-content.

    So you add an unique id to each tab-content.

    After that you change the click event to show content based on the id. replace the following javascript code:
    $(‘#v-nav>div.tab-content’).hide().eq(items.index($(this))).show();

    with this one:
    $(‘#v-nav>div.tab-content’).hide().filter(‘div#’ + $(this).attr(‘tab’)).show();

  • Vics

    Hi! Great script and design :)
    Have a small problem with background not stretching behind content on tab 2 as it is quite long…any ideas? can i make it fit 100%?
    It performs beautifully ni your demo…am I missing something in the CSS…

    Thanks, V

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

    you can fix this by setting the overflow of tab-content to auto. You can also remove the min-height. The tab-content height will be stretched according to it’s content.

    #v-nav > div.tab-content {overflow: auto;}

  • Shantred

    This is great! However, I cannot seem to figure out how to change the size of the content box, or make it stay to the left of the page.

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

    The size of the content is based on the parent element.

  • http://twitter.com/Boshanka Ben Shaw

    Hi There, Fantastic work here, it’s a beautiful solution. I’m attempting to use it with a project i’m working on which requires a total of 12 vertical items – it appears that the menu has problems after a 10th item is added – the first item gets messed up when you try and click it and by default the 12th item loads open. I’m guessing there’s some sort of conflict with having the “tab1″ displaying as part of the full name “tab12″

    Any help you could give would be appreciated. You can see where i’m at here: http://82.147.22.200/~ecuador/project/indigenous-community-in-the-andes/

    Thanks so much!

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

    you can change the function showTab, remove the star before the the =.

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

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

  • http://twitter.com/Boshanka Ben Shaw

    You are a gentleman!

    Thank you so much for the super quick response! The fix worked perfectly!

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

    No problem!

  • JDW

    Hi. While I have this working on my website, there’s an issue with using the “back” button on the browser. When viewing the page this routine resides on, the script appears to issue a postback (of sorts) to display the first item on the list. If I then press the back button, I’m brought to the same page which then triggers a postback — and so forth. So, I basically get a loop that keeps me from leaving the page using “back.” Is there any sort of method to keep this from being an issue? Thanks!

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

    What version of jQuery are you using? are you using it with asp.net as well.

  • JDW

    jQuery 1.8.2 and yes, the primary site is an asp.net site (Windows platform running DotNetNuke) Thanks!

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

    In the newer version of jQuery are some features different.
    replace the following in function showTab

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

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

  • JDW

    Thanks for the follow-up, but your two code fragments appear to be the same. Or am I reading them wrong?

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

    this is the correct one:
    $(“#v-nav ul li[tab=" + tab + "]“).click();

  • JDW

    Thanks – that works ;-) But, I was using the option you had mentioned in another Q/A that asked about having the first tab displayed when the page is first viewed.
    The replacement code fragment was:
    $(“#v-nav ul li:nth-child(1)”).click();
    Is there any way to get this version of the code to work without the “back” issue? Thanks so much!

  • dr john

    This looks great!!!
    But I can’t get it to work in IE8.
    Test page that fails is at sky-web.net/Mark Two/www/coaches.htm

    Any idea what I’ve done wrong?

    (Works okay in chrome, firefox, safari, and IE9 though)

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

    Dr John, this article provides just quick start how to build a vertical tabs. I have also release this a as full featured plugin for creating plugin, full tab functionality, cross-browser support (including IE7, IE8, IE9 , Chrome, Firefox, Safari and Opera) and more. Check out the full feature list

    The plugin is released here

  • dr john

    Nice Plugin!
    Hope it’s successful for you. I’ll bare it in mind if another project needs this sort of UI, as the price is very fair.
    I suspect if I played with z-index values I could probably get mywrapper’s background image to work properly on my test page..
    Best of luck with other jquery/css3 projects, I’ll be visiting regularly to view your work.

  • http://www.facebook.com/charles.sandor1 Charles Sandor

    I just set up the vertical tabs and it looks great except for one issue. I have ten tabs and so tab 1 is also picking up the content for tab 10. Am I limited to 9 tabs with this?

    Tab 10 only shows the conttent for tab 10. Tab 1 shos both tab 1 and tab 10 content.

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

    Can you provide a live link?

  • Coco

    Looks nice and works nice… but it kills your browser’s back button, at least on FF 17. If I click on your demo and try to go back to this page, I only cycle through the tabs and it’s impossible to get back here. I don’t know if it’s a browser issue or what, letting you know just in case