Skip to content

Instantly share code, notes, and snippets.

@awakekat

awakekat/tabs from checkboxes

Created August 26, 2016 17:34
Show Gist options
  • Save awakekat/75887acc38bd85eede8d61fb58610cc8 to your computer and use it in GitHub Desktop.
Save awakekat/75887acc38bd85eede8d61fb58610cc8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tabs from checkboxes
<html>
<head>
<title>Tabs with only CSS</title>
<style>
.container {
width:1080px;
margin: 0 auto;
}
.tab-container input{
display:none;
}
.tab-container label{
display:block;
float:left;
padding:5px 10px;
cursor:pointer;
}
.tab-container input:checked + label{
background:black;
color:white;
cursor:default;
}
.tab-container .tab {
display:none;
padding:5px 10px;
clear:left;
}
.tab-container input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
.tab-container input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tab-container input:nth-of-type(3):checked ~ .tab:nth-of-type(3){
display:block;
}
</style>
</head>
<body>
<div class="container">
<h1 style="text-align:center;">Tabs with only CSS</h1>
<div class="tab-container">
<input type="radio" checked name="tab" id="tab1">
<label for="tab1">TAB #1</label>
<input type="radio" name="tab" id="tab2">
<label for="tab2">TAB #2</label>
<input type="radio" name="tab" id="tab3">
<label for="tab3">TAB #3</label>
<div class="tab">This is the sample content for tab one.</div>
<div class="tab">So you want a little bit of some different content for tab two.</div>
<div class="tab">Tab 3 is just crazy different than the other two.</div>
</div><!-- end .tab-container -->
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment