Jquery Vertical Tabs

by Avinashullal

HTML

<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" style="display: block;">
             <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>

CSS

.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;
           ...

JavaScript

$(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();
                    //$('#v-nav>div.tab-content').hide().eq(items.index($(this))).fadeIn(100);
                    $('#v-nav>div.tab-content').hide().eq(items.index($(this))).show();
                    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();
        });