Simple Tabs

tabs.css

/* Tabs
------------------------------------------------------------- */
#tabContaier ul {
    overflow: hidden;
    background: #f5f5f5;
 /*Clearing float. */
    border-bottom: 1px solid #aaa;
    height: 35px;
 /*Takings tabs to higher layer */
    z-index: 100;
    padding: 0 !important;
    margin: 0 !important;
}

#tabContaier li {
    float: left;
    list-style: none;
}

#tabContaier li a {
    background: transparent;
    border-right: 1px solid #aaa;
    color: #666;
    cursor: pointer;
    display: block;
    height: 35px;
    line-height: 35px;
    padding: 0 30px;
    text-decoration: none;
    text-transform: uppercase;
}

#tabContaier li a:hover {
    background: #eee;
}

#tabContaier li a.active {
    background: #c8db2a;
    border-right: 1px solid #ffffff;
    color: #ffffff;
}
.tabDetails {
    background: #fbfbfb;
    border: 1px solid #fff;
    margin: 34px 0 0;
 /*1px less then actual tab height to fix the border gap between active tab & tab detail section. */;
}

.tabContents {
    padding: 20px;
}

.tabContents h1 {
    padding: 0 0 10px;
}

.tabContents p {
    padding: 0 0 10px;
}

tabs.html

<div id="tabContaier" class="tabs clearfix">

    <ul> 
        <li><a href="#tab1" class="active">Product Description</a></li>
        <li><a href="#tab2">Supplement Facts</a></li>
        <li><a href="#tab3">Label Design</a></li>
    </ul>
    
    <div id="tab1" class="tabContents">
    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et consequat erat. Nullam lacus diam, vulputate at interdum at, tempus eu dui. In hac habitasse platea dictumst. In ac leo vitae orci pharetra iaculis. Pellentesque dapibus, diam id blandit ornare, dui est posuere ligula, a tincidunt lorem ante quis leo. Praesent cursus, enim vel tempor mollis, nisi ligula sagittis turpis, quis gravida leo libero quis augue. Nunc nec enim felis.,/p>
    
    </div>
    
    <div id="tab2" class="tabContents">
    
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et consequat erat. Nullam lacus diam, vulputate at interdum at, tempus eu dui. In hac habitasse platea dictumst. In ac leo vitae orci pharetra iaculis. Pellentesque dapibus, diam id blandit ornare, dui est posuere ligula, a tincidunt lorem ante quis leo. Praesent cursus, enim vel tempor mollis, nisi ligula sagittis turpis, quis gravida leo libero quis augue. Nunc nec enim felis.</p>
    
    </div>
    
    <div id="tab3" class="tabContents">
        
        <p style="color: #c8db2a; font-size: 18px;">Donec tempus, justo sit amet consectetur fringilla, tortor purus venenatis erat!</p>
    
    </div>

</div>

tabs.js

/* Tabs */
    
$(".tabContents").hide(); // Hide all tab conten divs by default
$(".tabContents:first").show(); // Show the first div of tab content by default
	
$("#tabContaier ul li a").click(function(){ //Fire the click event
    var activeTab = $(this).attr("href"); // Catch the click link
    $("#tabContaier ul li a").removeClass("active"); // Remove pre-highlighted link
    $(this).addClass("active"); // set clicked link to highlight state
    $(".tabContents").hide(); // hide currently visible tab content div
    $(activeTab).fadeIn(); // show the target tab content div by matching clicked link.
});