Toggle buttons and other content visibility problem

Ask the community
,
1

Hi,
I have troubles with my toggle.
https://tesydigital.editorx.io/my-site-6
When the first button is clicked only first text and video should be visible, all other stuff must be hidden. It’s the same logic with other buttons.

All works fine if two or three switching clicks are made, but on the third one this happens:

1894×762 96.6 KB

Here is the code:

export function button1_click ( event ) {
$w ( “#button1” ). style . backgroundColor = “#8E3AAB” ;
$w ( “#button2, #button3” ). style . backgroundColor = “#90AE2F” ;
$w ( “#videoBox2, #videoBox3, #text2, #text3” ). hide ();
$w ( “#videoBox1” ). show ( “roll” );
$w ( “#text1” ). show ( “roll” );
}

export function button2_click ( event ) {
$w ( “#button2” ). style . backgroundColor = “#8E3AAB” ;
$w ( “#button1, #button3” ). style . backgroundColor = “#90AE2F” ;
$w ( “#videoBox1, #videoBox3, #text1, #text3” ). hide ();
$w ( “#videoBox2” ). show ( “roll” );
$w ( “#text2” ). show ( “roll” );
}

export function button3_click ( event ) {
$w ( “#button3” ). style . backgroundColor = “#8E3AAB” ;
$w ( “#button1, #button2” ). style . backgroundColor = “#90AE2F” ;
$w ( “#videoBox1, #videoBox2, #text1, #text2” ). hide ();
$w ( “#videoBox3” ). show ( “roll” );
$w ( “#text3” ). show ( “roll” );
}

P.S. I also tried this type of logic:

if ( ! $w ( “#videoBox1” ). hidden ||
! $w ( “#videoBox3” ). hidden ||
! $w ( “#text1” ). hidden ||
! $w ( “#text3” ). hidden ) {
$w ( “#videoBox1” ). hide ();
$w ( “#videoBox3” ). hide ();
$w ( “#text1” ). hide ();
$w ( “#text3” ). hide ();
}

It doesn’t work either.

Thanks for your help in advance.