Skip to content

Instantly share code, notes, and snippets.

@chestozo
Last active December 20, 2015 22:38
Show Gist options
  • Save chestozo/6206269 to your computer and use it in GitHub Desktop.
Save chestozo/6206269 to your computer and use it in GitHub Desktop.
css only tabs: based on http://kizu.ru/fun/popups/
.nav {
margin: 0;
padding: 0;
height: 2em;
}
.nav li {
list-style: none;
float: left;
background: #EEE;
padding: 0.1em 0.2em;
margin-right: 0.2em;
}
.tc {
display: none;
}
.t {
display: none;
}
.t:checked+.tc {
display: block;
}
<ul class="nav">
<li>
<label for="t1">one</label>
</li>
<li><label for="t2">two</label></li>
<li><label for="t3">two</label></li>
</ul>
<input id="t1" class="t" type="radio" name="tabs"/>
<div class="tc1 tc">One content</div>
<input id="t2" class="t" type="radio" name="tabs"/>
<div class="tc2 tc">Two content</div>
<input id="t3" class="t" type="radio" name="tabs"/>
<div class="tc3 tc">Three content</div>
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment