Hi all!
I’m trying to create this show/hide toggle interaction:
A few problems:
and
What am I doing wrong here?
Here is my public share link:
https://preview.webflow.com/preview/test-show-hide?preview=60419bb08bf2e8155d9f1d4b135a35e0
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: http://test-show-hide.webflow.io/ (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 — 2017-03-04_01-57-11.png — 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 … 
Thanks so much for diving in and helping! It means a lot! 
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.