tabbed content jquery/css

by cfarm

HTML

<div id="tabbed-content-wrapper">
            <ul class="tabs">
                <li><a href="#tab" class="defaulttab" rel="coffee">Coffee</a></li>
                <li><a href="#tab" rel="juice">Juice</a></li>
                <li><a href="#tab" rel="tea">Tea</a></li>
            </ul>
    
<div class="tab-content" id="coffee">we want all the coffee</div>
<div class="tab-content" id="juice">getting juiced</div>
<div class="tab-content" id="tea">Tea time.</div>
</div>

CSS

#tabbed-content-wrapper {
    background:#A872A3; /*purple*/
}

ul.tabs {
    width:auto;
    margin:0 auto;
    display:block;
    background:#50E4E4; /*aqua blue*/
}

ul.tabs li {
    display:block;
    padding:0 5px;

}
ul.tabs li a {
    display:block;
    float:left;
    padding:9px;
    font-size:0.8em;
    border-right:1px solid #CBCBCB;
    color:#666;
    text-decoration:none;
    margin-bottom:-1px;
    font-weight:bold;

}


ul.tabs li a:hover{
text-decoration:underline;
}
.tabselected {
    font-weight:bold;
    background-color:#CBCBCB;
    color:#fff!important;
    background: red;
text-decoration:underline!important;
}

.tab-content {
    clear:both;

    width:auto;
    margin-top:-1px;
}

.accessibly-hidden {
    visibility:hidden;
}

.visible {
   visibility:visible;
}

JavaScript

$(document).ready(function() {
 
    $('.tabs a').click(function(){
        switch_tabs($(this));
    });
 
    switch_tabs($('.defaulttab'));
 

});
 
function switch_tabs(obj)
{
    $('.tab-content').removeClass('visible').addClass('accessibly-hidden');
    $('.tabs a').removeClass("tabselected");
    var id = obj.attr("rel");
 
    $('#'+id).removeClass('accessibly-hidden').addClass('visible');
    obj.addClass("tabselected");
}