How do I click (interaction) to show an element and hide others?

Design help Animations & Interactions
1

Hi All,

I have a problem with setting up an interaction. To explain, I have an illustration set up as per the image below.

image
image1612×837 151 KB

When someone clicks on the orange button, it displays a pop up and after clicking it a second time, it will close.

Image 2
Image 21297×643 290 KB

The interaction above was set up as per the old Webflow video guide on showing and hiding elements on click. However, here is my question, how do I make it such that when I click on another orange button, it will bring up its respective pop up, and the current pop-up closes? Currently, if I click on another orange button, it just opens up its own pop up, resulting in two pop up simultaneously, so on and so for. (As shown in image below)

image
image1405×688 161 KB

Thanks in Advance!

2

Hey there

It looks like you will need to do custom code with Javascript and conditioning styles of CSS for these elements.

3

You do need to have good grasp on HTML/CSS for this type of work and JavaScript for more custom/interactive work. Also having good experience with Webflow is a great advantage as a lot of things can be done with Webflow interaction as well.

But here is one solution I can share with you, which technically is the same concept. This has some tricks applied but no need of JS and uses CMS data as well.

Check it to learn or just clone and customize it.

4

I sneak around this using a Dropdown. It has a built in “When this Opens” and “When this Closes” animation option. You can use the Orange dot as an icon and have no text for it and it would work. All without any code. Think of it as an Accordion. Just be sure to leave it as an Absolute or it may move some of your project around.