<div>
<input type="radio" id="s1" name="s" checked/>
<input type="radio" id="s2" name="s"/>
<input type="radio" id="s3" name="s"/>
<input type="radio" id="s4" name="s"/>
<div class="tabs">
<label for="s1">One</label>
<label for="s2">Two</label>
<label for="s3">Three</label>
<label for="s4">Four</label>
</div>
<ul class="sections">
<li>Section one</li>
<li>Section two</li>
<li>Section three</li>
<li>Section four</li>
</ul>
</div>
* {
margin: 0;
padding: 0;
}
body {
padding: 1em;
font-family: sans-serif;
background-color: #777;
}
ul {
list-style-type: none;
}
input[type=radio] {
position: absolute;
left: -9999px;
top: -9999px;
}
.tabs {
position: relative;
z-index: 999;
height: 42px;
white-space: nowrap;
font-size: 0;
}
.tabs label {
display: inline-block;
vertical-align: bottom;
margin-right: 4px;
margin-bottom: -1px;
margin-left: -1px;
background: #EEE;
padding: 12px 24px;
border: solid 1px #DDD;
border-radius: 5px 5px 0 0;
cursor: pointer;
background-color: #EEE;
text-transform: uppercase;
font-size: 11px;
letter-spacing: 1px;
box-shadow: 0 -1px 6px rgba(0,0,0,0.1) inset;
color: #666;
}
.tabs label:first-child {
margin-left: 0;
}
.tabs label:hover {
background-color: #DDD;
}
input:nth-child(1):checked ~ .tabs label:nth-child(1),
input:nth-child(2):checked ~ .tabs label:nth-child(2),
input:nth-child(3):checked ~ .tabs label:nth-child(3),
input:nth-child(4):checked ~ .tabs label:nth-child(4) {
padding: 14px 24px;
border-bottom-color: #FFF;
background: #FFF;
box-shadow: none;
color: #000;
}
.sections {}
.sections li {
display: none;
height: 180px;
padding: 1em;
border: solid 1px #DDD;
border-radius: 0 5px 5px 5px;
background-color: #FFF;
box-shadow: 1px 1px 20px rgba(0,0,0,0.4);
}
input:nth-child(1):checked ~ .sections li:nth-child(1),
input:nth-child(2):checked ~ .sections li:nth-child(2),
input:nth-child(3):checked ~ .sections li:nth-child(3),
input:nth-child(4):checked ~ .sections li:nth-child(4) {
display: block;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.