Auto-close The Previous Accordion When You Click Another One
cr: Jenna from Holy Moly Creative Studio
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.
Webflow - Code to the Rescue
The Webflow Library for custom code snippets that unlocks powerful possibilities in Webflow. Includes hand-picked and tested custom code that you can use in Webflow Projects.
Need further help?
Need further help in understanding the resources or how to implement them? Feel free to reach out
About Ali Saeed
Ali Saeed is a Kuwait-based web designer and Webflow developer who has been working as a graphic designer for 4 years, building social brands, company profiles, and presentations. He recently jumped into web design and development. As a web designer, Ali focuses on clarity in design layout and messaging strategy. In his free time, he loves to help the web community, solve problems, and build resources for web designers who want to optimize their websites using Webflow.
Send an email if you'd like to collaborate :)
View his portfolio website