Dropdown Menu and Collapse All

[AriesDatuin]

Hello guys,

I'm trying to create a dropdown navigation/menu, but having difficulties figuring out the logic. I posted a crude example Pen of what I have so far.

 

Basically, I have a timeline that animates the expand/collapse of a dropdown menu.

The difficult part I am trying to wrap my head around is: the clicked menu should expand while everything else should collapse, similar to an accordion. Also clicking on the expanded menu will also collapse it.

 

I've tried using a class, labels, checking the state of the timeline, etc., but my brain can't seem to comprehend what the logic should look like. I end up cluttering the code and overcomplicating things.

 

Any help in the right direction is appreciated

See the Pen xxdwLBq?editors=1010 by allistar-tenpenny (@allistar-tenpenny) on CodePen

[OSUblake]

Hi @AriesDatuin

 

This thread might help you out. The logic sounds pretty close, even if you don't want to wait for the other animations to reverse before starting the active one.