Streaming live at 10am (PST)

Hide/Show not working properly


#1

Hello, I would like some help if you can, thanks :slight_smile:

I dont know if you can help me or not, but I`ll try to describe my situation.

The bug is in this section:

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.

You can preview it on webflow using this link:
https://preview.webflow.com/preview/letsgrowyourbusiness?utm_source=letsgrowyourbusiness&preview=41dfe58abd092b03530d8019b85620ee

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`ll appreciate your attention,

Regards.


#2

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!


#3

Thanks mattvaru for your time. I’ll test it right now and will be back to tell you if I got it to work, thanks again for such fast answer :slight_smile:


#4

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 :slight_smile:

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 :slight_smile:


#5

Sure, give me a sec.


#6

Thanks, take your time =)


#7

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!


#8

Ah my bad I should`ve explained properly :slight_smile:

Im talking about the first section, Ill fix it first then Ill apply the same effect on the section number 2! Thanks.


#9

Cool, no worries! I will take a look at it.


#10

Thanks for the real-time support lol


#11

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.


#12

Thanks matt, Ill try to follow your instructions to fix this tonight. After it i`ll comment again to update you, thanks again for your time :slight_smile:

Edit: Oh you even recorded a video, lol thanks mate =) Thats really nice of you!


#13

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.

Regards :wink:


#14

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!


#15

Oh yea I always forget you can apply interaction to classes as a whole, thanks for the tip :slight_smile: 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!