Interactive map with hide/show animation

Hi Guys -

Im trying to create an interactive map of a building with 5 floors. The idea is that, when hovering and/or clicking on a floor, the right information appears on the left of the building.

I broke the image up in 5 different div blocks, corresponding to a single floor, each with their own hover state. Now I’m trying to manage the hide/show interaction of the separate informational divs on the left, but I don’t seem to succeed…at all! The default when opening the page should be showing the information of the ground floor.

This is the link to the page: https://watertoren.webflow.io/onze-ruimtes

Any pointers on where to start would be highly appreciated!

Hi,

Basically, the way hide/show interactions work is by having divs set to display:none when the page loads and then have an interaction that switches the divs to display once the user hovers or clicks each respective element.

When you created your modals, did you follow webflow’s tutorial?

Cheers

Hi Kimmy,

Thanks for your response!

I checked one tutorial, which gave me the basic idea of showing certain elements and hiding them upon clicking an element. Where I have difficulty is the fact that there are 5 elements of which each time only one should be visible, depending on what area you click on the map.

I guess that should be possible right?