How to hide the children of a container, but not the container?

I’m making an image gallery with custom buttons, and this is the functionality I’m trying to make:
You click a button, it hides all images in the container, then shows one image from the container.

This is the code I wrote for it:
export function button1_onclick ( event ) {
$w ( “#box1” ). children . hide() ,
$w ( “#image1” ). show ()
}
Error: Property ‘hide’ does not exist on type ‘(Element & AnyProperties)’.

Its working in preview mode, but I’m assuming this error is whats making it break on the live version.
If anyone could help I’d really appreciate it- this is my first time doing any coding to my site.
Thanks!

The children is an array for element. You can use forEach for for loop to do the hide() action on each element.

array of elements *

@certified-code Could you do an example by any chance? I’m having a hard time understanding the API Reference doc

@certified-code wait I think I figured it out-

Velo prompted a template after just typing “foreach” in the console and I got this:

array . forEach ( element => {
});

Plugged this in and it worked!
$w ( “#box1” ). children . forEach ( element => { $w ( “Image” ). hide ()
});

Amazing! Amazing :star_struck:

Hi there,

You’re not following @certified-code 's suggestion correctly, you’re passing the same specific element to hide for each loop cycle, children are site elements with IDs, pass each ID to a selector and hide it.

$w('#box').children.forEach(element => $w(element.id).hide()); 

Hope this helps~!
Ahmad