How to create multiple triggers for a single timeline?

I’m working on a menu and can’t for the life of me figure this out.

Let’s say we have…

  • the main div wrapper (.menu .toggle)
  • 1 button (.ico .toggle)
  • 2 events Onmouseover/leave, for the div wrapper
  • 2 events Onclick to open/close for the icon
  • 1 timeline changing the width of (.menu)

The mouse over works just fine. But absolutely nothing happens on click.

Any pointers would be appreciated.

The screenshot shows the menu class on the timeline trigger selector, but it’s actually the toggle class on my build

Hi! :raising_hand_man:t2: Did you try “Restart“ instead of „Play“ for the timeline action?

Ok I think I figured out the issue (not the solution)…

Nothing to do with restart/play/reverse, those were working fine.

The same button has an On Click event. So when it is pressed, both open and close events fire at the same time. So nothing happens.

So how can we get a single button to have open/close functionality?

Edit: I think I found a good way by adding a class to the btn on click, then using that new class to reverse the timeline. It doesn’t work exactly but I’ll tinker around a bit more.

Also, it looks like the active class is also being added to the button trigger, even though the target element is ( Custom (Document QuerySelector), .menu, menu-active ). Possible bug.

Edit 2: Ok I can’t figure how to use a single element to open and close, so I added in 2 different icons. On click one hides and the other shows. So works as intended now.

Nevermind, it didn’t work as intended. I just scrapped the hover idea since most people use phones anyway.

If you have an onmouseover event on a div and you put click events inside of the div, there are a lot of issues. Such as adding/removing classes, etc. I can’t consistently replicate the issue, but something always messes up. Moving the click events outside of the div, then everything works perfectly fine.