Accordion not working properly

Design help Layout & Design
1

Hi there,

My accordion isn’t working properly. Whenever I open an accordion Item, the other accordion items don’t close like webflow’s accordion tutorial. Moreover, It’s difficult to press and sometimes when I close one accordion item another one I didn’t touch opens. I compared my accordion side by side Webflow’s accordion tutorial (Webflow’s read-only link is located below with my site’s read-only link) and they are both the same in styling and interaction. The only difference is the size of the toggle and padding differences.

Any help or suggestion is appreciated. Thanks a bunch!

Here is my site Read-Only: https://preview.webflow.com/preview/angelika?utm_medium=preview_link&utm_source=designer&utm_content=angelika&preview=e9d3f07c8f4ebef978c71e9c666a3529&pageId=61f6f08a39f437423d3dc0e0&workflow=preview

Webflow’s Accordion Read-Only Link: Webflow’s Accordion

2

Hey @Lumareto

You didn’t post your link so we are unable to troubleshoot, once you share that we might be able to help, cheers

1 Like
3

@Incognito_Agency Thank you! Sorry about that!
https://preview.webflow.com/preview/angelika?utm_medium=preview_link&utm_source=designer&utm_content=angelika&preview=e9d3f07c8f4ebef978c71e9c666a3529&pageId=61f6f08a39f437423d3dc0e0&workflow=preview

4

Hey @Lumareto

For starters your animation differentiates between items. Sometimes you add on Dropdown Opens animation named “Accordion Open” and sometimes you add “Accordion close” and vice versa for Dropdown Closes animation.

Other than that I’d recommend having initial states in the animation as well as instead of using interaction trigger for growing/shrinking the class “Accordion item” I’d recommend configuring height of dropdown list class.

That will make it possible to close out others and control the one that you want.

Let me know if you need further assistance with this, I’d be happy to help