CSS Tabs Testing Groundz

dabblet.css

/**
 * CSS Tabs Testing Groundz
 */

#tabarea1 {
	position:relative;
	background:slategrey;
	height:200px;
}
#tabarea1 > .tab > label {
	float:left;
}
#tabarea1 > .tab > label + .content {
	position:absolute;
	top:25px;
}
#tabarea1 input[type="radio"] {
	display:none;
}
#tabarea1 input[type="radio"]:checked + label {
	background:blue;
}
.content {
	display:none;
}
#tabarea1 input[type="radio"]:checked + label + .content {
	display:block;
}

dabblet.html

<input type="radio" name="n" /><input type="radio" name="n" /><input type="radio" name="n" /><input type="radio" name="n" /><input type="radio" name="n" /><input type="radio" name="n" /><input type="radio" name="n" />
<br /><br />

<div id="tabarea1">
	<div class="tab">
		<input type="radio" name="tab-group" id="tabone" checked />
		<label for="tabone">Tab One</label>
		
		<div class="content">Howdy</div>
	</div>
	<div class="tab">
		<input type="radio" name="tab-group" id="tabtwo" />
		<label for="tabtwo">Tab Two</label>
		
		<div class="content">Aloha</div>
	</div>
	<div class="tab">
		<input type="radio" name="tab-group" id="tabthree" />
		<label for="tabthree">Tab Three</label>
		
		<div class="content">Salve</div>
	</div>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}