Code for 'hide all'?

Ask the community
,
1

I have an interactive map with pins on it for the locations, 10 in total, but more to come. Each location has his own box (with the address of the location) that appears when hovering over one of the pins. If one box is displayed, I want the other boxes not to be visible.

So I use this code:
export function PinBox1_mouseIn ( event ) {
$w ( ‘#Box1’ ). show ();
$w ( ‘#Box2’ ). hide ();
$w ( ‘#Box3’ ). hide ();
}
export function PinBox2_mouseIn ( event ) {
$w ( ‘#Box2’ ). show ();
$w ( ‘#Box1’ ). hide ();
$w ( ‘#Box3’ ). hide ();
}
export function PinBox3_mouseIn ( event ) {
$w ( ‘#Box3’ ). show ();
$w ( ‘#Box1’ ). hide ();
$w ( ‘#Box2’ ). hide ();
}

It’s straight forward and simple. But for every box to show I have to type the code for 9 other boxes to hide.

Is there a code I can use that tells to hide all the other boxes at once?
For example: $w ( ‘#Box’ ). hide-all ();

I’m not very experienced with code so let me know if I’m not clear enough.

T H A N K S !

2

Sure, and you don’t have to create a different function for each one.
Remove your code and have something like:

const numberOfPins = 10; //Change it to the number Pins .
$w.onReady(() => {
	for(let i = 1; i <= numberOfPins; i++){
		$w('#PinBox' + i).onMouseIn(event => {
			for(let j = 1; j <= numberOfPins; j++){
				i === j ? $w('#Box' + j).show() : $w('#Box' + j).hide();
			}
		})
	}
})

This will only work if you keep the element property IDs as you wrote.