Issues with Accordion UI Element: Unpredictable Behavior and Solutions

·

Hello, does anyone else use the accordion UI element? I find it is very unpredictable - duplicating the same component will end up with varying results: some of them automatically open on page load, frozen, and some closed, and none of them closing when clicking away. Here is a page demonstrating the problem. Is there a simple fix for these issues?

6 comments

Matt J.
·
Erin B. yeah very unfortunate, long-standing conflict with Webflow interactions that seems to be inconsistent. Webflow will paste in the interactions correctly in some cases, and in others not. Once you resolve it a few times, its straight forward to resolve but I understand how this can be frustrating to do everytime. Here's a doc on how to resolve: https://www.relume.io/resources/faqs/how-do-i-fix-the-first-accordion-not-closing
Erin B.
·
Thanks Matt, I appreciate your prompt response! Will they stay closed after I implement this once?
Matt J.
·
Erin B. hmm on a per project basis yeah, should
Matt J.
·
ah if you are looking to have only one open at a time, that would require something different entirely. https://www.relume.io/resources/faqs/how-do-i-have-a-single-accordion-open-at-a-time
Matt J.
·
by default each one you open will stay open and thats just because of the complexity of the logic otherwise and to avoid having custom code for FAQ components but its possible to do with the dropdown element - I've read that there are some accessibility considerations here though since you are technically using a dropdown element thats not actually a dropdown menu.
Erin B.
·
Oh that's very interesting, thank you Matt J.! Worth looking into for sure.