▼
Streaming live at 10am (PST)

Click to show/hide content not the same as video

#1

Hello,

I followed this simple tutorial on how to show and hide text. I really like the 0px height to auto height effect. https://www.youtube.com/watch?v=r9klhrbuj1Y

I would like the same effect on my site on the "Joe's Feed" bar. Click that bar and a section under ("feed section") should appear and expand out. I'm not able to mimic the smooth behavior of the 0px to auto height effect in the video. I'm close, but it looks like something is disrupting the animation. Is this because I'm applying the effect to an entire section?

https://preview.webflow.com/preview/finsweet100?preview=9c002fcaacb7fd753a94b5e6931a5cc5

Thanks.

#2

Change the section that you are affecting to Overflow: Hidden. That usually fixes that type of behavior.

#3

Unfortunately that did not work

#4

Add height 0% to the first step with display:block. If you don't do this, it has nothing to grow from so it just appears.

#5

Hey @Finsweet it looks like you have padding on your expanding "feed section".

If you remove the padding from that element, just place the padding on the text inside of the element. When you have an element set to a height of 0px, it does not take into account the padding inside of the element. Also set the initial height of "feed section" to 0px instead of the display: none initial appearance for a smooth expanding animation.

#6

Thank you for this. Makes perfect sense now.

closed #7

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