Simple Tabs without javascript

Simple Tabs with pure HTML and pure css without javascript.

by scurrilus

HTML

<div class="tabbox">
	<input type="radio" id="tab1" class="modifier" name="tabbox-A" checked>
	<input type="radio" id="tab2" class="modifier" name="tabbox-A">
	<input type="radio" id="tab3" class="modifier"name="tabbox-A">
	<input type="radio" id="tab4" class="modifier"name="tabbox-A">
	<div class="tabbox-nav">
		<label for="tab1">Tab1</label>
		<label for="tab2">Tab2</label>
		<label for="tab3">Tab3</label>
		<label for="tab4">Tab4</label>
	</div>
	<div class="tabbox-content">
		<div id="tabContent1">
			<h3>
				This is Box 1
			</h3>
			<p>
			Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
			</p>
		</div>
		<div id="tabContent2">
			<h3>
				This is Box 2
			</h3>
			<p>
			Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			</p>
	 	</div>
		<div id="tabContent3">
			<h3>
				This is Box 3
			</h3>
			<p>
 At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			</p>
		</div>
		<div id="tabContent4">
			<h3>
				This is Box 4
			</h3>
			<p>
			Justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
			</p>
	 	</div>
	</div>
</div>

SCSS

.modifier {
	display: none;
}

label {
	display: inline-block;
	cursor: pointer;
	padding: 0.5em 1em;
	background: #ccc;
}

.tabbox-content div {
	display: none;
	width: 95%;
	padding: 1em;
	background: #eee;
}

@for $i from 1 through 10 {
	#tab#{$i}:checked ~ .tabbox-content #tabContent#{$i} {
		display: block;
	}
	
	#tab#{$i}:checked ~ .tabbox-nav label[for=tab#{$i}] { 
		background: #cc0000;
	}
}