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.
Dropdown Menu and Collapse All
in GSAP
Posted
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