Streaming live at 10am (PST)

A link option after placing a button for a hidden layer


#1

Hi, how do I create a link option after placing a button for a hidden layer?

For example, I place a "read more" button and I want it to be on the same page/ screen but not visible until I click the ' read more' button. How do I hide the lengthy text until I click the button ?


#2

The procedure is the following:

  1. create you button or text link or block link... or any element
    really, but it's better being a link element, so you'll get the hand
    cursor when :hovering it
  2. create your description element, basically a box with texts and
    images in it. It can be anywhere. Give it a class, like
    "Description"
  3. give the description element a height of zero pixels. so that it
    disappears
  4. create an interaction for your button, called "make description
    appear"
  5. chose the onlick trigger, then check "target another element" and
    type the class name of your description element, it should
    auto-complete
  6. create the first step (first click) and give a height to your
    description element
  7. create the second step (second click) and set the height back to
    zero

test it !

Don't have much time now but I can do a screencast abt that later.


#3

Oh! Check example 3 here https://webflow.com/design/interactions?preview=8566312743353562051c799dc925c01e


#4

Took quite awhile to absorb , example 3 helped a lot. it's all good now and figured out , thanks to you , Vincent !!


#5

Well now I think you can replicate it everywhere, it's quite a simple interaction once you understand it, right?


#6

yup, but now it's hidden text everywhere!!! Thanks Vincent.


#7