Snappy show/hide text?

Hi all…

I’m a complete novice with this kind of web builder and I’m using the video tutorials as my starting point for my site. I’ve used the show/hide tutorial and created a hidden block of text and a button with a click interaction to show/hide the text. The only problem is that when the text box opens and closes, there is a ‘snap’ moment at the start and end of the transition. I read somewhere that this is caused by padding, but I can’t find any instructions on how to correct it.

Very basic terms only please, this is only my second day at this and my only experience of creating websites is on Moonfruit, so basically I have no understanding of the principles underlying this stuff, although the tutorial videos have taught me a lot!

Thanks guys!

Hi @marc_uk, thanks for reaching out here on the forum :slight_smile: To be able to better help provide some guidance, If you could share the read-only link to your site, we can see how it is currently styled and how the interaction is setup.

Can you also give the page name and class names of the elements you are using in the show/hide that is not animating smoothly?

More information about read-only links:

Learn web design with free video courses and tutorials | Webflow University

Cheers, Dave

Thanks @cyberdave

https://webflow.com/design/vad?preview=e2a01d2b8377b05838fe14625d757ab1

Hi @marc_uk, to me, it looks like there is some padding on your hidden text text block, and this is causing the issue, remove that top padding and then it should go smoothly, see my screenshot.

For more styling control, put a div block where the hidden text element is, and set it’s position to relative. Then put a paragraph inside the div. Give the paragraph equal padding on each side. You could try doing something like that to give more styling control rather than use just the text block by itself.

I hope this helps, let me know, cheers, Dave :slight_smile:

Hi @cyberdave … that makes sense, so I will give it a go!

The other thing I need to learn is how to place objects side by side, so can you direct me to any tutorial videos for that please? I would like to add some content into the navbar, with phone number and email as in the draft image below, but I don’t know how to do this ‘the right way’.

Thanks for the help.

The div block worked a treat! I didn’t realise that classes can be applied to different objects. I thought a class applied to a section, could only be applied to sections, but when I applied my ‘hidden text’ class to the div block, it saved me copying the old text block… fantastic stuff! Am really getting into this now :smiley:

1 Like

@marc_uk, yep, it is really pretty easy to use divs for creating your site. Here is a great learning site:

We have updated videos and more, the structure section should give you a good start :slight_smile: Cheers, Dave