Hi,
Yep I understand what you’re trying to do. I have an example you can see with this interaction:
https://preview.webflow.com/preview/gj-project-1?preview=53ee36f634ce054846fb517f2ba2f891
These three buttons have the same issue. To solve this, you’ll need to:
- Add 1 Div - Set to relative
- Add 2 Buttons inside - Set to block so they stack on each other
These 2 buttons will need the same interaction you have, or what I have on the example page. But the problem is this effect you’re after can only use “a button with 1st Click only”.
A second button will need to appear after top button disappears. This second button will again only use 1st click as well. But it needs to show after the first button hides. Then you can get the effect.
Section One (with 2 buttons)
Button 1: Shows content 1, hides content 2
Button 2: Hides content 2, shows content 1
Section Two (with 2 buttons)
Button 3: Hides content 1, shows content 2
Button 4: Shows content 2 hides content 1
I hope this makes sense, it’s kind of hard to explain. Basically, Button 1 shows content 1, but you’ll have Button 2 showing content 2. The problem happens because Button 1 also hides content 2. Button 2 hides content 1.
So Button 1 can only have a 1st Click interaction! And if you add a 2nd Click to it, there’s no way to separate the multiple actions in the panel. WF uses it as one interaction but can’t divide elements in the panel, they’ll all be a part of 2nd Click! Giving you that pause effect your experiencing.
To bypass this, you’ll need a Button 2 under Button 1. But both will have a “1st Click Only”! Then the effect is possible. Because Button 1 can show content 1 and hide content 2, and disappear.
Button 2 will show but you haven’t clicked it, because you will have already moved on to the other section. But when you go back to section 1, you’ll be using the Button 2, so it will have a 1st Click still available. It can hide content 2 and show content 1!
I hope this helps. If you get stuck just shoot me a message and I’ll help ya out.
