4 Option Element Interaction

Here is my public share link: https://preview.webflow.com/preview/tims-fabulous-project-277ee5?utm_source=tims-fabulous-project-277ee5&preview=897267923ef3dc3ff157446d465fa6ae


Hey Guys,

If you look at my share link, you’ll see I have 4 circular divs on the page:

  • Opt1
  • Opt2
  • Opt3
  • Opt4

Above those circular divs, I have a div with a header that say “Opt 1 header”.

What I would like to happen, is when I click on the “opt 2” div, the “Opt 1 header” div dissapears and is replaced by “Opt 2 header” etc etc… Ideally it would also have a smooth transition between the header divs :slight_smile:

I hope this makes sense.

Can anyone help me out or point me in the right direction for relevant threads / tutorials?

Thank you.

---- UPDATE —

OK, So I think I’ve found the work around. You can have a look in my share link (top of post).

I made 4 divs, and set their display property to “none”, and then created an interaction for each div, that when I clicked on it, it would set the display property for that element to ‘block’ and the other 3 elements to ‘none’ and repeated that across each div.

However, this feels clunky, and I would like a smooth transition between each div (fade in / fade out). Does anyone have any ideas?

Many thanks