Click to show hide not working

Help on this would be appreciated as I am going round in circles!

I have carefully followed the tutorial for Click to show / hide elements. The result sort of works but it’s not quite right and I can’t work out what I’ve done wrong or not done. The problems:

  1. The text appears and disappears without ease (the enclosing background & border behave correctly but not the text itself).
  2. The cursor on hover doesn’t display as a hand.

Look for “Free Courses” and “Money off vouchers” on this page. They are the links to display the hidden text:

http://b-fast.webflow.com/join

Help please! Thanks

You have to put a overflow:hidden property on the container so the text is masked during the shrinking process.

Drag a Link Block widget and put your show/hide element inside, this will bring the hand cursor

There’s a 3rd problem, the element doesn’t shrink entirely before disappearing. It’s because you’ve used margins, that aren’t part of the dimension of the element. Set the margins to zero and use paddings. Nest time you build this kind of behavior, put everything into an extra div, make this div show/hide and don’t give it any other CSS property.

1 Like

Hi @BFast, @vincent made some great recommendations. This demo may also be helpful to use as a model:

Demo: https://webflow.com/design/demokit?preview=72388b288a26874be319ca1f7412d4eb
Page Title: Click to Show and Hide

Hope this helps a bit!