Streaming live at 10am (PST)

Drop downs from a carousel

Hi all,

We’ve had a very keen designer throw us a curve ball when it’s come to development, and I would really appreciate an experts eye over this challenge we’ve got.

The challenge
We have three images with drop down button options. When these are clicked, a div wrapper drops below and shows the user an image slideshow, text and call to action. This happens three times across the available images on the page.

However, when a second or third one is clicked, the other two aren’t disappearing, creating a mess of dropdowns that overlap and are not visible.

We’ve also somehow messed up the interaction itself and the content that should be on the drop down element is no longer showing.

To help paint a better picture of what it should look like, here are some Invision designs:

  • List item Scroll to the section where it says “guided tours”, “Cultural Performances”, “Maori Arts”: Loading Share Experience

We’re trying to get it so that the user only sees one element if they click on the circle button (or the image), and the other ones would close.

Does anyone have any ideas?

Here is my site Read-Only: Webflow - Waitangi Treaty Grounds

Thanks in advance team, this will help us out a lot and allow us to go live before Christmas! :christmas_tree: