Accordion Interaction Issues

Hey folks,

I’m able to get a basic accordion working per this video: https://www.youtube.com/watch?v=CABPvMNE1Kc

I also want to have just one accordion item open at a time, so all others close when you open one. That’s explained pretty well in the comments of the above video:

Hey guys, we’ll use the same interaction but tweak it a bit. We’ll use two triggers: The first trigger closes all content, the second trigger opens the sibling content. That’s it! See how in this video: https://cl.ly/0D2g3w3S222J. Note the order of the triggers is important — you’ll want to close all content before opening the content you want.

BUT, the one thing ^ that example doesn’t do, is now when I click to close the original accordion, it won’t. It ONLY closes if you choose to open another.

I’d like the user to be able to do both:

  1. Opening another accordion closes others
  2. Click an open accordion to close it

Now, I have it kind of working, even with multiple levels of accordions, but I’m getting weird behaviors where sometimes it works great, and sometimes a first or second click doesn’t seem to register. I’m sure somewhere in my interactions I have a clicking conflict, but I can’t seem to nail down a consistent result any way I try.

Any help or ideas here is hugely appreciated!


Here is my public share link: LINK
Here’s my demo site: LINK

Hi @helmsmith,

Why not use a simple dropdown element? it will have all the behaviours you mentioned.
Take a look at these:

  1. https://webflow.com/website/accordion-iq0p44ph?rfsn=1495911.39ce0
  2. Accordion (No-Code) - Webflow
1 Like

To add onto that, if you need any cloneable elements like the ones avivtech mentioned you can search for them on this site: https://showcasesearch.webflow.io/

1 Like

How did I not realize that was an element!? Hah, thank you!