Native <details name="..."> instead of a checkbox hack — see patterns/checked-accordion/ for the comparison. Same name = the browser closes the others automatically, just like radio buttons.

What's the difference to checked-accordion?

No checkbox hack, no CSS selector magic needed. The browser handles toggle state, keyboard support, and exclusivity (only one panel open) entirely on its own.

When to use checked-accordion instead?

When several panels are allowed open at once (just don't set name — that's usually enough) or when an open/close animation beyond the default height jumps is needed, which doesn't run smoothly without calc-size()/interpolate-size (Chromium-only, check the build date below again before relying on it).

Browser support?

See the SKILL.md table. Fallback when name isn't supported: every panel behaves like a normal, independent <details> — no breakage, just no exclusivity.