Streaming live at 10am (PST)

Accordion Interaction Issues

#1

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

0 Likes

#2

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. https://webflow.com/website/faq-no-code?rfsn=1238427.48b8d
1 Like

#3

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

#4

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

0 Likes