Community forum for knowledge and support

Updated 2 months ago

Unpredictable behavior of accordion ui element

At a glance

The community member is experiencing issues with the accordion UI element in Webflow, where duplicating the same component results in varying behaviors - some automatically open on page load, some are frozen, and none of them close when clicking away. The community members discuss potential fixes, including a document on how to resolve the issue of the first accordion not closing, and the possibility of having only one accordion open at a time. However, there is no explicitly marked answer in the comments.

Useful resources

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?

M
E
6 comments

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

Thanks Matt, I appreciate your prompt response! Will they stay closed after I implement this once?

hmm on a per project basis yeah, should

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

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.

Oh that's very interesting, thank you ! Worth looking into for sure.

Add a reply
Sign up and join the conversation on Slack