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.


Created by Mark Mead