Accordion — radio button only

Welcome! This accordion is built with zero JavaScript — only radio buttons and CSS. Because all inputs share the same name, checking one automatically unchecks the others, giving you exclusive single-open behaviour entirely in HTML and CSS.

Each section is an <input type="radio"> followed by a <label> and a .content div. The CSS rule input:checked ~ .content sets max-height to a large value, and a CSS transition animates the expand/collapse smoothly — no JS required.

The radio input is visually hidden but remains in the accessibility tree, so keyboard users can Tab to it and toggle with Space. Screen readers announce the label text. For production use, consider adding aria-expanded via a small JS snippet to improve announcements.

This technique works in every modern browser — Chrome, Firefox, Safari, and Edge — without any polyfills. The max-height transition approach is the most reliable CSS-only animation method since height: auto cannot be transitioned directly.

Swap the + icon for an SVG chevron, adjust the transition duration, change colors via CSS variables, or nest accordions by using different name attribute groups. Each independent group controls its own open state without affecting the others.