I’m afraid I’ll be terrible at explaining what’s bothering me in English, but I really do hope that you will help me.
The thing is, I’ve made a ‘slide-in’-sidebar at www.designerhjelme.dk. It’s display:none initially and then changes to display:block while moving 400px (or so) to the left when triggered.
That works amazingly well. What doesn’t work well is that fact that there are multiple buttons that trigger this slide-in/slide-out thing and if you use trigger A to open it and you close it with trigger B (which are each others opposites transition-wise), then you’ll have to press trigger A twice for it to actually open it once again, since it’s still waiting for that 2nd mouseclick.
Example: Go to www.designerhjelme.dk and press the mailicon at the top right of the screen. That will trigger the sidebar to slide in. Now press the X button at the top right. That makes the sidebar go away again. If you press the mail icon again you’ll have to press it twice for it to actually go back to 1st mouseclick again and open the sidebar.
What do I do to synchronize these triggers with each other?
You’re running into a well known issue with 2 clicks interactions. It happens in Webflow but also happens in some other softwares.
Long story short: there is no solution for your problem if you continue using the 2 clicks steps. You have to re-work your structure and interactions and use only the first click of the click-triggered interactions.
Because you will not be able to “reset” your first interaction and it will always continue to hang and wait for the second click. So let’s not declare a second click at all.
Possible solutions with using only one click interactions:
only allow for closing by clicking a unique element, eventually make the opening after the first click mask the original interaction area
after the first click, make one element appear on top of the original interaction area, with its own closing interaction. When clicked, the element disappears again, on top of the closing/folding action ← this is the solution I use most often
use a variation of a drop down menu for your unfolding/folding thing: the dropdown has a special behavior that in certain cases can help you. It closes by itself when you click outside of it.
