Skip to content

Instantly share code, notes, and snippets.

@w3collective

w3collective/css-tabs.html

Created August 4, 2022 06:32
Show Gist options
  • Save w3collective/e54a4e92328a4825186fc6df143c5a5c to your computer and use it in GitHub Desktop.
Save w3collective/e54a4e92328a4825186fc6df143c5a5c to your computer and use it in GitHub Desktop.
Download ZIP
CSS Tabs (No JavaScript required)
Raw
css-tabs.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Tabs</title>
<style>
.tabs {
list-style: none;
position: relative;
margin: 0;
padding: 0;
width: 100%;
font-family: sans-serif
}
.tabs li {
display: inline-block;
}
.tabs input[type="radio"] {
display: none;
}
.tabs label {
display: block;
cursor: pointer;
padding: 10px 15px;
border: 2px solid black;
border-bottom: 0;
border-radius: 3px 3px 0 0;
}
.tabs .tab-panel {
display: none;
overflow: hidden;
width: 100%;
position: absolute;
left: 0;
border-top: 2px solid black;
}
.tabs [id^="tab"]:checked + label {
background-color: black;
color: #fff;
}
.tabs [id^="tab"]:checked ~ [id^="tab-panel"] {
display: block;
}
</style>
</head>
<body>
<ul class="tabs">
<li>
<input id="tab1" type="radio" name="tabs" checked />
<label for="tab1">Description</label>
<div id="tab-panel1" class="tab-panel">
<p>This is the content for the description panel.</p>
</div>
</li>
<li>
<input id="tab2" type="radio" name="tabs" />
<label for="tab2">Specifications</label>
<div id="tab-panel2" class="tab-panel">
<p>Specifications content can go here.</p>
</div>
</li>
<li>
<input id="tab3" type="radio" name="tabs" />
<label for="tab3">Reviews</label>
<div id="tab-panel3" class="tab-panel">
<p>Here we can display some reviews from our customers.</p>
</div>
</li>
</ul>
</body>
</html>
@w3collective
Copy link
Author

Source => https://w3collective.com/pure-css-tabs-no-javascript/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment