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


  1. 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:

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))

1 Like

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!

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