Show and Hide Problem

Design help General
1

Hi,

I would like to perform a basic show and hide on my site. I believe I have followed the instructions on the webflow tutorial to a tee.

I have a Div with columns and text inside, upon which I would like the show and hide to perform. However, what actually happens is when a button is clicked to perform the interaction, the text immediately appears, followed by the smooth transition down of the div as opposed to the div revealing the text. Similarly, when the button is clicked again, the div smoothly transitions up with the text remaining where it is, then the text just disappears.

Any ideas wonderful people?!

Dan

237×572 24.3 KB

2

Setting your ‘5 min Div’ to overflow: hidden should do the trick I think :smiley:

2 Likes
3

Can we get the read-only link so we can dive in and take a peek :slight_smile:

4

Thank you! Works fine now apart from when the div closes again, the very last bit jumps shut as opposed to smoothly closing…

5

You’re welcome :). That may be caused by padding. But would need a share link for your site to tell for sure.

6

Hi cyberdave, here’s the link:

https://preview.webflow.com/preview/rs-test?preview=785e7895badc6a07c018a2ca47b90fa6

I removed the padding and replaced it with margins and it does work better but it is still not perfect. If you go to the two links “write a review” and “read all reviews” towards the bottom you’ll see the problem. “write a review” starts working fine after the first time you open it but the first time it doesn’t animate, it jumps from one state to the next.
I’m also having issues with the red lines on “read all reviews” this screen grab shows what it looks like on load (the way it should)

and this one shows what it looks like after opening and closing the accordion

I’ve experimented with different settings to no avail. It appears that both padding and stroke give some erratic behaviours to the animation.

Another question, when I provide a share link, is that to a static version of my site or does it change if I continue working on it?
Thanks

7

Hi @Mowgli, Could you share the the site read-only link: Share a read-only link | Webflow University, a screenshot of the element having the interaction ? We can see how that is set up and help :slight_smile: Cheers,
Dave