Alternating interactions

Not sure I understand… but I think this is what you are looking for…

You have 3 boxes… using the H3 element… titled

  • What the heck is cereal ?
  • Has anyone read this ?
  • and
  • What the heck is cereal ? (again ?)

And you want them invisible

  • until a viewer selected the associated link…
  • which I’m guessing are
    — About it
    — Who likes it
    — Buy it

Since Webflow cannot target an ID…

  • you need to put unique class around each Content Box Wrapper

So… you need this:

DIV Box1

  • DIV Content Box Wrapper
    ---- What the heck is cereal ?

DIV Box2

  • DIV Content Box Wrapper
    ---- Has anyone read this ?

DIV Box3

  • DIV Content Box Wrapper
    ---- What the heck is cereal ? (again ?)

Create an Interaction that Moves and Hides (opacity) all 3 Boxes (1,2,3) up and off screen

When the user clicks on About It

  • an interaction assigned to About it
  • will move Box 2 and 3 up and off the screen and change opacity
  • then will move Box 1 “into position”… on the screen and change opacity

Same thing will happen when the user selects Who Likes It

  • except box 1 and 3 will move up
  • whereas box 2 will move “into position”

Rinse and repeat with box 3.


Here’s a similar discussion

The OP on that post did something similar… he his site here: - scroll down the post to see it