Streaming live at 10am (PST)

Issues with 'Show/Hide'


#1

Hi all,

Probably a really simple solution but I can’t see it… at the bottom of the page are 10 buttons with 10 text boxes beneath each one. I want these to be initially hidden, and appear when the assosciated button is clicked.

I believe everything is correct, but when looking at the preview of the site (even on a different computer that’s not visited the site before), all the text boxes are showing upon load.

Also, any help on how to make these ‘ease’ in rather than just appear would be great. Thanks in advance.

https://preview.webflow.com/preview/openhouse?preview=c1e19901f975b3b33fc493091ae58acf


#2

Yep, it’s always tricky to explain but… When adding an interaction on an element… and you’re actually going to effect another element… it’s best to set an “Initial State” only on one side (1st Click).

If you look at your interactions again -

On the 2nd click, the “Initial State” for the text is set to ‘Show’, but the click is set to ‘Hide/Close’. :blush:

Just remove the 2nd click inital state - I always use only 1 initial state (usually on 1st trigger) for this very reason.

For Easing:

Show/Hides won’t have easing available. You can use Size, but you’ll need to use a regular text link. And then tweak the button & text “Margin” for spacing. Test the text box background color as well.

I’ll shoot you a quick video to follow for the changes:


#3

That’s amazing, thank you so much!


#4

Not a problem, you’re very welcome. Have Fun! :smiley: