Auto-close The Previous Accordion When You Click Another One
Usually, accordions for FAQs work in a way that isn’t UX friendly. Ideally, when one accordion is opened, the others should close automatically. This custom code will do just that
Make sure to add the interaction to the whole accordion div that contains the question and answer!
Start by pasting the custom code on the page where the accordions are
Attributes to add
- Add data-click= “Accordion” and role=”region” to the main accordion div. This is the div that houses the question and answer divs
- Add aria-expanded = ”false” and role=”button” to the question div
- Add aria-hidden = ”true” to the answer div
And that's it. Publish and test it out.