Skip to content

Instantly share code, notes, and snippets.

@WebInspectInc
Created February 14, 2012 22:38
Show Gist options
  • Save WebInspectInc/1831175 to your computer and use it in GitHub Desktop.
Save WebInspectInc/1831175 to your computer and use it in GitHub Desktop.
CSS Tabs Testing Groundz
/**
* 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;
}
<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>
{"view":"split","prefixfree":"1","page":"css"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment