Roadmap interactions

Hey guys!

So I am working on this roadmap section of the webpage and there are a few things that I’m not able to achieve currently and would love to get some help.

  1. Element #1 should be open from the beginning.
  2. When you open a new element, the currently opened should close - so only 1 element is opened at once.
  3. Besides clicking on the number, the pop-up should close even if you click outside of the area anywhere else.
  4. When element is opened, I would like to keep the black (opened) state that is currently only visible on hover.

I know I’m asking for a lot, but if I could get any help with any of these outstanding items, that would be great!

Here is my public share link: https://map-click.webflow.io/

Read only link: Webflow - Map

Best,
Tea