Hide all divs in a stack on click

Design help Animations & Interactions
1

Hello Webflow hivemind!

I’m reasonably new here and Webflow is revolutionizing my business.

I’m trying to create a clickable map with info on the sections below all stacked in divs. The trigger should close all the divs before opening the right one.

I’ve got 2 interactions set up:

1, Closes all targets class wide
2, Opens selected elements.

My problem is that the selected elements in the second step appear and then disappear again, can’t quite work out what I’m doing wrong. (map section on the link)

Thanks!

Andy

https://preview.webflow.com/preview/castletown-law?utm_medium=preview_link&utm_source=designer&utm_content=castletown-law&preview=17dd95b93a550e1e0af080d3c93ca7a5&mode=preview

2

@andy_saltyfruit - can you provide some screenshots to elaborate on what you are trying to do?

Based on your interactions, it looks like you have two initial states for opacity on the same target:

image

One is 0% and one is 100% which may be causing issues.

On your fade out I think you should only need the one step going to 0%, not the initial 100% part of the animation.

3

Hi Sam sorry I should’ve updated the read only link when I made the edit.

So bascially I’m trying to

On click of any of the pin dots:

1, All project grid classes close
2, Selected project grid element opens

https://preview.webflow.com/preview/castletown-law?utm_medium=preview_link&utm_source=designer&utm_content=castletown-law&preview=f269b47b4cf8966f6712f651e23a5d6a&mode=preview

4

I’ve made a few changes on this, and I’ve found something that works but is there a more efficient way to build it than putting in a new interaction for each div that I want to show?

Updates here

https://preview.webflow.com/preview/castletown-law?utm_medium=preview_link&utm_source=designer&utm_content=castletown-law&preview=0a288bb233ec906567aac10a990fc05d&mode=preview