1
HTML/CSSAdvanced#css#grid
HTML/CSSAdvanced#css#layout-puzzle
How do you build a CSS-only accordion or tab component?
Use the :checked pseudo-class on hidden radio/checkbox inputs paired with sibling combinators and labels acting as clickable triggers, toggling visibility of the associated content panel with the ~ or + combinator — no JavaScript needed for basic cases.
Example
<input type="checkbox" id="toggle1" hidden>
<label for="toggle1">Section 1</label>
<div class="panel">Content</div>
<style>
.panel { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
#toggle1:checked ~ .panel { max-height: 200px; }
</style>