Hiding multiple elements at once

Discussion Ask a question
,
1

I am currently hiding multiple elements at once with this code:

export function btn3_click ( event ) {
$w ( ‘#step3’ ). show ()
$w ( ‘#Bimg3’ ). show ()
$w ( ‘#step2’ ). hide ()
$w ( ‘#Bimg2’ ). hide ()
$w ( ‘#step1’ ). hide ()
$w ( ‘#Bimg1’ ). hide ()
$w ( ‘#btn4’ ). show ()
$w ( ‘#btn3’ ). hide ()
$w ( ‘#btn2’ ). hide ()
$w ( ‘#btn1’ ). hide ()

}

Is there any way I can shorten this code since I am looking to hide and show more elements? What I was thinking was maybe something like

export function btn3_click(event){
btn[4] show
btn[1, 2, 3} hide
}

and so on. I know that’s completely wrong but I just can’t figure out how to write the code properly . Thanks in advance for any help!

2

Here’s a sample that can at least shorten your code and maybe make it more readable -

$w.onReady(function () {
    
});
const b1 = $w("#button1");
const b2 = $w("#button2");
const b3 = $w("#button3");
const b4 = $w("#button4");

function show(btn) {
    btn.show();
    }
function hide(btn) {
    btn.hide();
    }

hide (b2); //for example

I’m sure there’s a way to express multiple element.options in an array-like fashion, but I’m too tired to keep trying stuff out…:expressionless:

3

Thanks for your help! If anyone knows how to do it in an array-like fashion please let me know

4

@decadthelena You can separate the elements by commas like this:

export function btn3_click(event){
    $w('#step3,#Bimg3,#btn4').show()
    $w('#step2,#Bimg2,#step1,#Bimg1,#btn3,#btn2,#btn1').hide()
}
2 Likes
5

@tony-brunsman Thank you!