Enable content in CSS Tabs

by hannes

HTML

<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.0.6-development-only.js"></script>
<div id="content" role="main">

    <div class="tabs">
        <nav>
            <ul>
            <li><a href="#tab1" class="selected">About</a></li>
            <li><a href="#tab2">Anatomy</a></li>
            <li><a href="#tab3">Achievements</a></li>
            </ul>
      </nav>
      <section class="tabs-content selected" id="tab1">
Scamper is the coolest. down vote favorite I'm using the code from the following site: http://calebogden.com/css-tabs/ which has allowed me to create some CSS tabs, however, the content is only visible when you hover over one of the tabs and ideally I would like the content to be visible without people having to do that. Scamper is the coolest. down vote favorite I'm using the code from the following site: http://calebogden.com/css-tabs/ which has allowed me to create some CSS tabs, however, the content is only visible when you hover over one of the tabs and ideally I would like the content to be visible without people having to do that.
            </section>
            <section class="tabs-content" id="tab2">
I'm using the code from the following site: http://calebogden.com/css-tabs/ which has allowed me to create some CSS tabs, however, the content is only visible when you hover over one of the tabs and ideally I would like the content to be visible without people having to do that. Scamper is the coolest. down vote favorite I'm using the code from the following site.
            </section>
            <section class="tabs-content" id="tab3">
Scamper is the coolest. down vote favorite I'm using the code from the following site: http://calebogden.com/css-tabs/ which.
            </section>
            </div>
</div>

CSS

#content { padding: 25px; background: #f6f6f6; }

.tabs {
width:100%;
}
    
.tabs nav a {
background: #FFF;
margin-right:2px;
display: block; 
float: left; 
line-height:50px;
font-size: 15px; 
padding: 0 25px; 
color: #222;
border:1px solid #ccc;
border-bottom:0;
text-decoration:none;
}

.tabs a.selected {
border:1px solid #08bbb7;
border-bottom:0;
color:#08bbb7;
position:relative;
z-index:1;
}  

.tabs section {
margin:-1px 0 0 0;
background: #fff;
border:1px solid #08bbb7;
color:#111;
padding: 25px;
width:100%;
float:left;
clear:both;
display: none;
}

.tabs section.selected{
display: block;    
}

section, header, footer, div, input, textarea, select, label, :before, :after{
box-sizing:border-box;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
}

JavaScript

var anchors = $(".tabs nav a");
var content = $(".tabs section");
    
anchors.on( "click", function(){
    content.removeClass("selected");
    anchors.removeClass( "selected" );
    var a = $(this).addClass("selected");
    $(a.attr("href")).addClass("selected");

});