The Checkbox Hack

pure css 2011 still works

Clickable open/close state stored in a hidden checkbox and read with :checked ~ sibling.

In 2026: A hidden checkbox holds the state, a label flips it, and the :checked sibling combinator styles a later element. It works in every browser and is the base of CSS-only menus, tabs and accordions. The catch is that the target must be a later sibling of the checkbox, which forces an awkward markup order.

Where it came from: Chris Coyier, 'The Checkbox Hack', CSS-Tricks, 2011. CSS-Tricks ↗

<style>
.toggle-box { position: absolute; left: -9999px; }
.toggle-label {
  display: inline-block; cursor: pointer;
  background: #234a6b; color: #fff; padding: 8px 16px;
}
.toggle-panel {
  max-height: 0; overflow: hidden;
  background: #eef2f7; color: #12233a;
  transition: max-height .3s ease;
}
.toggle-box:checked ~ .toggle-panel { max-height: 200px; padding: 12px; }
</style>

<input type="checkbox" id="t1" class="toggle-box">
<label for="t1" class="toggle-label">Click to toggle</label>
<div class="toggle-panel">
  Hidden until the checkbox is checked. A label flips a hidden checkbox, and the
  sibling combinator reveals this panel. No JavaScript.
</div>

sandboxed demo · breaks nothing but itselfrestart

More in pure css