Easy CSS Tabs

A simple approach to CSS-only tab UI. Uses :target and anchor tabs to show/hide content sections.

by Pete Fecteau

HTML

<div class="tabwrap">
    <div id="funfacts">
        <a href="#funfacts">Fun Facts</a>
        <div><b>Funfacts:</b> Deserunt numquam expedita ea aliquam aspernatur et rem quasi dicta nemo esse animi facere nesciunt obcaecati explicabo officiis distinctio quia porro eos.</div>
    </div>
    <div id="admin">
        <a href="#admin">News</a>
        <div><b>News:</b> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste illum ratione explicabo nihil quam cumque quaerat sint libero inventore optio rem iusto voluptatum beatae ab at! Obcaecati porro sint sapiente.</div>
    </div>
</div>

CSS

* {margin:0;padding:0;}
body {padding:20px;}
.tabwrap {
    min-height: 250px;
    position: relative;
    width: 100%;
    font-family: Verdana, sans-serif;
}
.tabwrap > div {
    display: inline;
}
.tabwrap > div > a {
    margin-left: -1px;
    margin-right:5px;
    position: relative;
    right: 1px;
    font-size:18px;
    line-height:18px;
    text-decoration: none;
    color: black;
    background: white;
    display: block;
    float: right;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-bottom: 1px solid white;
}
.tabwrap > div:not(:target) > a {
    border-bottom: 0;
    background-color:#eee;
}	
.tabwrap > div:target > a {
    background: white;
}	
.tabwrap > div > div {
    background: white;
    z-index: -2;
    left: 0;
    top: 30px;
    bottom: 0;
    right: 0;
    padding: 20px;
    border: 1px solid #ccc;
    font-size:12px;
}	
.tabwrap > div:not(:target) > div {
    position: absolute
}
.tabwrap > div:target > div {
    position: absolute; z-index: -1;
}