Replacing hidden texts in container linked to images

Hi, I’ve been trying to create an interactive food map that reveals a scrollable text list in the container on the right, when clicked on an icon in the map image on the left. I also hope to replace the text list when clicked on another icon to reveal that different location’s food options.

I have already added the different icons on the map image to act as buttons. I am having trouble finding out how I can reveal the places when clicked, and to replace the entire list when a different icon is clicked. Any assistance is welcome and appreciated!!

Have a look at these existing pages here as they should point you in the right direction.
https://support.wix.com/en/article/corvid-reacting-to-user-actions-using-events
https://support.wix.com/en/article/corvid-tutorial-adding-custom-interactivity-with-events

Hi GOS, thanks for the reply!

I added in multiple text boxes and added the click in functions already. However the problem I am having is that unless the user double clicks and hides the previous textbox, the text boxes will overlap one ontop of the other. Is there a function to replace the textboxes when another element is selected? Instead of them overlapping on one another?

Thank you!

If you want a text box to close when another one opens, then put that in the click event function too.

So instead of using show to show the text box, you use hide to hide it instead.

https://www.wix.com/corvid/example/hide-%26-show-elements

Hi GOS,

The bottom example is exactly the effect I want! However after trying it out, it cant seem to work. It would be great if you could take a look at my code and uncover what went wrong.

$w(‘#sobfood’) etc are text boxes while
$w(‘#food’) is a container i made to contain the various text boxes that i wish to switch and replace


Thank you!