Streaming live at 10am (PST)

Accordion with Transition doesn't close already-opened Tabs


#1

I added a simple transition to the webflow accordion with Height=0px to Height=auto …
Of course this wont close already-opened Tabs when clicking twice.

How can i achieve to close already-opened tabs when opening another tab?


http://wedoo.webflow.io/ (Frontpage last Section)
https://webflow.com/design/wedoo


#2

Hello @wedo

In the interaction that opens the accordion add some steps to close all accordions prior to opening the current one.

Make sure the close steps apply to all elements of that class and the open steps only apply to the current element.

Hope that helps. Happy designing!


#3

Hey @matthewpmunger

Thanks for your reply, I tried that already and didn’t succeed, because I can’t select on one DIV (which opens and closes) at one interaction-command “on all elements” and on the other “only children with this class”.
See Screenshot:


#4

Duplicate the interaction and split the steps. Have each one trigger on click of the accordion.

  • One interaction to close all accordions (affect class)
  • One interaction to open current accordion with a delay to give the first interaction to finish (affect current element)

Maybe try this.


#5

Uh, yeah it almost works @matthewpmunger

Bug:

Open first row. Then open second row. First row closes nicely. Then click on first row again. Nothing happens, damn. Clicking second time on first row Row opens nicley.

Why doesnt it open on the second click on the same row?

http://wedoo.webflow.io/


#6

Please share the read-only link and I can take a closer look later. Thanks.


#7

https://preview.webflow.com/preview/wedoo?preview=9aae6d86ab613471f9f2323aa4aaf9f8

Thank you!!


#8

There shouldn’t be any actions on the 2nd click.

Other than that, it’s working for me. Do you see something different?


#9

THAAAAAAAAAAANNNNNKKKKKKKK YOUUUUUU!!!

It’s working perfectly.


#10

Ahhh, but now I’m not able to close it anymore on second click :-/
Reproduce: Open a Accordion Row and try to close it again.