Two buttons, same 1st and 2nd click function

Design help Animations & Interactions
1

This is my first time posting for help on the forum so please let me know if I’ve done something wrong and I’ll correct. I’m pretty new to building websites so hopefully this isn’t a completely newb question.

  • I have an initial nav screen with four buttons

-When you click, the buttons move, and the button you clicked is tucked on the left side and a button displays to "return on the bottom right corner.

  • I want both the tucked button on the left and the button on the bottom right to be able to do the same 2nd click function, return to the nav screen - it works great for the button on the left - The button on the right however seems to have a problem with this.

— I’ve attempted having just the 2nd click action as a first click action on the right button but won’t complete the action and I think even if it did, I’d need a way to reset button on the left to its first click action.

  • I figure worst case, I can duplicate the entire panel and have one start as an open and the other start as closed than have it hide show duplicate panel on click but this sounds like a full day fix and I feel it should be easier (full day because I think it would require an open and close duplicate for each open and close action which would be 4 (4 buttons) times 2 (different interaction movement on mobile) and… I just really don’t wanna do that if I don’t have to
    ¯_(ツ)_/¯

Thanks for any help you can provide, I really appreciate it, I figure after a full night of trying to fix this, it’s time to ask for help.

— I should also mention that I did come across a forum post from 2015 that might fix this problem with java but I’m not really sure how to adjust the javascript for my specific problem. Here’s the link to that post: Multiple Buttons with the same Click Interaction

Here is my site Read-Only: https://preview.webflow.com/preview/photos-by-lily-template?utm_medium=preview_link&utm_source=dashboard&utm_content=photos-by-lily-template&preview=0eb192d0487373c06779eca7bbd003a9&mode=preview

2

Well, I was hoping for a Java solution, but I was able to find a workaround that I might have to play with some timing and smoothing, but otherwise seems to work well.

I’ll be honest, I’m pretty new and there was a few hours work involved in this for me so I’ll try to explain the major parts of what I did.

A big part was making all the second (close) interactions target the cass and most everything had a unique class to it.

Next - make sure the classes are targeting all elements (this one stumped me for a bit).

Then, I split the single double click button into 2 buttons, one for the open and the other for the close, hide close button when the section is closed and reveal the close button when the section is open (I had to shrink the size of the close button by percentage to get this to work, otherwise it seemed to mess with the layout and not keep position right).

Then I just linked the the second button on open to also do the close action.

Last I duplicated it for table and lower (different nav movement on those layers).

  • I’m really happy about this because this was the last thing I needed for my first template design to be done. The share link and publish link are below, feel free to check it out and have a great one!

https://preview.webflow.com/preview/photos-by-lily-template?utm_medium=preview_link&utm_source=dashboard&utm_content=photos-by-lily-template&preview=ff062da0f11d01bba249cb6607cb8c6d&mode=preview

Published link: https://photos-by-lily-template.webflow.io/