Widgets · 13
Structure an accordion
Accordion state belongs on buttons, and those buttons belong inside the section headings.
What to do
- Create three native .accordion-trigger buttons, each as the only child of a heading.
- Give every trigger aria-expanded and a unique aria-controls target.
- Start panels hidden and keep Enter and Space activation working.
Result
Run the checks
Edit the HTML and select “Check solution”. The preview updates automatically.
If you are stuck
Each heading wraps its button, and each button points to one panel ID. The preview supplies the toggle logic; native buttons make Enter and Space activate it.