Streaming live at 10am (PST)

Trouble with show/hide interaction functionality


Hi all!

I'm trying to create this show/hide toggle interaction:

A few problems:

1) it seems to be just appear instead of easing "open" as I set in the interactions


2) when I click to close it, it seems to be hung up on the padding of the "hidden-text" block before it blinks closed.

What am I doing wrong here?

Here is my public share link:

Click to show/hide content "hidden text" blinking open/closed

Hey, it's because you use top and bottom padding on div block "hidden-text". Just set them to 0 and Overflow is Hidden. Now check :))))
If you need space around your text - increase top and bottom margin of your paragraph.
Next time use x-ray mode))


Ah yes, thank you helg! That made it work for when the box is collapsing back (hide) but the box still blinks in when I first click the button (to show). Any ideas why this would be?

Here's the updated interaction: (same public share link above)


Hi @adiggy, try adding some px height to the hidden text div and see if that helps, i.e. 200px.

I hope this helps!


Thanks for the idea, @cyberdave! Adding it to the interaction itself worked — — although it's not ideal since I want this interaction to be responsive, so what would be a way to do that without bringing a precise pixel height into it?

It's confusing because in the video I embedded originally, it said to set the interaction height to "auto" and it seemed to work in the video ... :confused:

Thanks so much for diving in and helping! It means a lot! :slight_smile:


Hi @adiggy, take a peek at a video I made, does this help?

I think that adding 100ms ease to the first step of the click trigger will help, sometimes interactions can be a little tricky that way and one interaction cancels the other out if run at the same time with same transition speeds. It probably can be looked at more in general I think, but this should help.


Thanks so much cyberdave! You rock! This is super helpful. Thank you for taking the time to show me what's what!

closed #9

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.