Accordion FAQ Help

Howdy.

I’m trying to make a classic Accordion - when you click the question, a panel opens. When you click again, the panel closes. I’ve managed to successfully create that - but when I duplicate it, the interaction is causing the second question clicked to open the FIRST panel. How do I tell it to target only the panel associated with the question, without having to make a million duplicated interactions?

Any help is appreciated!

Thanks,
Billy


Here is my public share link: Accordion Test

Live: http://accordion-test.webflow.io/

You can reuse the animations. In short - the answer is:

  • Change how the animation is triggered - from element, to affect class.
  • Change animation to affect elements with class.
  • Add Mouse tap event on the parent div (Q1,Q2) but for this one leave at the bottom to be affect by element - ( because you are using different div classes for each )

Hopefully it isn’t confusing.

1 Like