For some reason when I click to open this section it opens right with one click. But after it to show and hide it takes 2 clicks. Do you guys have any idea what did I do wrong for this to be like this? Thanks for your time.
As you can see the second button on this sections works fine, because I didn’t add a secondary div (which changes the text). So I`m guessing the main problem which causes the 2 clicks problem its related to this additional div, but I can’t see a solution for it.
I took a brief look, and it looks like the problem is solved by changing your interaction slightly. I think the issue might stem from the initial state of the “Show” interaction. On Display for the Show Interaction, certain elements are set to Display:None, but when I changed them to Display:Block, the interaction worked as you want.
Does that make sense?
My answer stems from this post and helpful solution from @StuM!
Hello again mattvaru, now I understand whats happening, basically they`re overlapping right, which creates the 2 click bug I believe. The thing is, how can I make the ~hide button~ invisible without setting a display: none? Thanks again, regards
Edit: Ah I did it through the style panel, there I could hide the elements on initial state instead of doing it in the interaction panel. But the problem still exist, can you check the updated document to see if you can find the problem? Thanks mate
Just so I’m on the same page with you, are we referring to the first section with that button, are we referring to the second section? I ask because both are identical and I want to make sure I’m taking a look at the correct section!
I found the issue: you’re assigning the same interaction to both the “Show” button and the “Hide” button.
AKA, you have a Show (1st Click)/Hide (2nd Click) interaction on both buttons. Ideally, your button to open the timeline needs to have a “SHOW on the 1st Click/NONE on 2nd Click”, so (1) modify the Show interaction to where you remove the “2nd Click - Hide”, as there shouldn’t be an interaction there.
Next, (2) select the button meant to close the timeline, go to the interaction settings, and change the “SHOW on the 1st Click/HIDE on the 2nd Click” to “HIDE on the 1st Click/NONE on the 2nd Click”
Additionally, (3)you’ll need to modify the HIDE interaction to actually hide the close button when the timeline is closed. Here’s an image of what the change looks like.
This screen recording should help show what I’m talking about, but if it doesn’t, I’m happy to walk you through via a screen recording of the whole process.
Wow I just tested and it works man, very impressive. I`ll try to understand everything I have done to apply it to section number 2. Thanks again for your time man, I appreciate it.
No prob chief! Don’t forget - you can apply an interaction to classes as a whole instead of just individual elements. Can save some time going forward by approaching it like that.
Additionally, if I was unclear on anything, I’m happy to explain further. The problem was essentially the “2nd Click” function in your interaction – nothing really more than that. You had it set up 99% correctly!
Oh yea I always forget you can apply interaction to classes as a whole, thanks for the tip It`s definitely time saving.
I think your explanation was super clear about the 2nd click ^^, Since I saw on webflow University the 2nd click usage I just tried to follow them lol, I guess we could have make it work with a 2nd click as well doing something different. Thanks again Matt the Legend =)
I`m not too pro yet with webflow interactions, I think I started using webflow less than a month, give me some time and Ill get there haha, take care mate!
