CSS Only Accordion — Checkbox Hack with grid-template-rows, No JS

Accordions built with the checkbox hack are common, but most older implementations animate max-height to a large fixed pixel value as a stand-in for "auto" — because CSS transitions cannot interpolate to/from auto directly. This snippet uses a newer, more correct technique: animating grid-template-rows between 0fr and 1fr, which sidesteps the fixed-height guessing problem entirely.

Why max-height: <bignum>px is a bad transition target

The old trick sets max-height: 0 when closed and max-height: 500px (or some other large guess) when open, transitioning between them. Two problems: if the real content is taller than the guessed value, it gets clipped; if it's much shorter, the closing animation has a long dead tail where nothing visible is happening while max-height keeps shrinking past the content's actual height, making the animation feel unevenly paced.

Why grid-template-rows: 0fr → 1fr solves it exactly

Fractional (fr) grid track sizes are directly animatable, and unlike max-height, a single-row grid's 1fr track always sizes itself to exactly the content's natural (intrinsic) height — never more, never less, and with no pixel value hardcoded anywhere. .acc-panel is set to grid-template-rows: 0fr (a zero-height row) when closed and grid-template-rows: 1fr when the sibling checkbox is :checked, and the browser animates the row's computed height across that range using the content's real intrinsic size as the endpoint — solving the "animate to auto" problem CSS has otherwise never had a good answer for.

Why .acc-content still needs overflow: hidden

A CSS grid row that's shrinking still contains its child at full height unless something clips it; .acc-content { overflow: hidden } is what makes the *visual* content clip as the row's computed height shrinks toward zero during the transition, rather than the text simply overflowing the collapsing row and staying visible. min-height: 0 on the same element prevents the grid item's default sizing behavior (which can otherwise refuse to shrink below its content's minimum intrinsic size) from fighting the animation.

Checkbox hack fundamentals, reused from elsewhere in this batch

Each panel's open/closed state is a single hidden <input type="checkbox">, with a <label for="..."> as the clickable header — clicking anywhere on the header row toggles the checkbox via native label-association, no click listener required. .acc-toggle:checked ~ .acc-panel reveals the panel using the general sibling combinator, and because each accordion item's checkbox is independent (unlike the star-rating or tab-switcher's shared name), every panel in this accordion opens and closes independently — this is a multi-open accordion, not a single-open one, by design of not sharing a name attribute across items.

The rotating plus-to-cross icon

.acc-icon is a plain "+" character rotated 135 degrees on :checked, which visually turns a plus sign into an "×" without swapping any icon assets or duplicating markup — the same character, just rotated, driven by the same sibling selector already doing the panel reveal.

Where this earns its keep

FAQ accordions are extremely common inside CMS-authored support pages, product documentation generated from Markdown, and embedded widgets on third-party sites — several of the exact contexts that strip <script> tags. Because both the toggle logic and the height animation here are pure CSS (grid layout plus a checkbox pseudo-class), this accordion opens, closes, and animates smoothly in all of those environments without any JavaScript runtime being available at all.