How to hide() multi elements in one go

Ask the community
,
1

I’m trying to create a map with about 35 Location Pin (button) where each pin pops-up a menu (a group of about 7-8 buttons).
I want to achieve an effect; when a Location Pin is hovered, its respective menu to pop-up and rest all other menus to hide… as shown in the video below.

My problem is; there are 34 Pin’s menu should hide when one Pin is hovered. That means, I need to write code for all those 34 element to hide 34 times (34 x 34= 1156 line code) … it’s a lot of code.

Is there a way I can achieve this with a simple approach?
where with one line code I can hide all the 34 items.

Here is the sample code that I started writing but than I realised it would 1,156 line code… its too much.

export function Penedesbutton_mouseIn(event) {
$w(‘#PenedesBox’).show()
$w(‘#PenedesLine’).show()
$w(‘#PladeBagesBox’).hide()
$w(‘#PladeBagesLine’).hide()
$w(‘#PrioratBox’).hide()
$w(‘#PrioratLine’).hide()
}
// ---------- Priorat (DOCa) ---------- //
export function PrioratButton_mouseIn(event) {
$w(‘#PrioratBox’).show()
$w(‘#PrioratLine’).show()
$w(‘#PenedesBox’).hide()
$w(‘#PenedesLine’).hide()
$w(‘#PladeBagesBox’).hide()
$w(‘#PladeBagesLine’).hide()

Thanks,
Pawan

2

Try this option:

export function hide(){
$w(‘#PladeBagesBox1’).hide()
$w(‘#PladeBagesBox2’).hide()
$w(‘#PladeBagesBox3’).hide()
$w(‘#PladeBagesBox4’).hide()
$w(‘#PladeBagesBox5’).hide()
}
export function Penedesbutton_mouseIn(event) {
hide().then(( )=>{
$w(‘#PladeBagesBox5’).show()
})
}

I think there is a simpler way but it already depends on how you called them names, run such a function, loop on everyone:
$ w (“# PladeBagesBox” + i)

3

Thanks AV promotional ,
I’m very new to Wix Code. I’m not able to understand the loop code completely.
Also, do I need to make the elements marked as hide on load?
is there any other setting that I need to follow.

Can you please help me complete this code in my test website?
I’m ready to pay for it.