Pure CSS Accordion and Toggles
HTML
<h1>Accordion</h1>
<section>
<input type="radio" name="a" checked>
<label>Panel 1</label>
<div>Panel content 1.</div>
<input type="radio" name="a">
<label>Panel 2</label>
<div>Panel content 2.</div>
<input type="radio" name="a">
<label>Panel 3</label>
<div>Panel content 3.</div>
</section>
<h1>Toggles</h1>
<section>
<input type="checkbox">
<label>Panel 1</label>
<div>Panel content 1.</div>
<input type="checkbox">
<label>Panel 2</label>
<div>Panel content 2.</div>
<input type="checkbox">
<label>Panel 3</label>
<div>Panel content 3.</div>
</section>
CSS
html, body {
background-color: gray;
margin: 0;
padding: .5em;
}
section {
background-color: white;
color: black;
}
section > input,
section > input + label {
display: block;
margin: 0;
padding: 0;
width: 100%;
height: 3em;
line-height: 3em;
cursor: pointer;
position: relative;
}
section > input {
margin-bottom: -3em;
z-index: 4;
opacity: 0;
}
section > input + label {
width: auto;
background-color: black;
color: white;
padding: 0 1em;
}
section > input + label + div {
padding: 1em;
display: none;
}
section > input:checked + label {
background-color: blue;
}
section > input:checked + label + div {
display: block;
