How to Create an Accordion (Accessible) with Alpine JS

Differences from the Accordion Component

• Added aria attributes
• Removed the smooth transition as it causes layout recalculations at each frame
• Updated to use <section> elements as they appear for screen readers that support navigation by landmarks
• Updated to use the hidden attribute to hide elements instead of x-show

If there are more than 6 accordions on the page then use a <div> to avoid lots of region landmarks.

Sources

• https://www.aditus.io/patterns/accordion
• https://design-system.service.gov.uk/components/accordion