Hiding Elements with a toggle

Ask the community
,
1

Hello! I am trying to create a toggle that when clicked, reveals 2 other elements, but when clicked again, goes back to the original 3 elements on the screen initially. I have limited coding experience, so can anybody point me in the right direction for implementing this? Thanks!

2

Not an expert by an stretch here but I’ve had success doing what you are describing with something similar to the below.

export function yourBUTTONnameHERE ( event ) {
console . log ( “Your Button Pressed” )
if ( $w ( “#itemYOUWANTTOHIDE” ). isVisible ) {
$w ( “#itemYOUWANTOHIDE” ). collapse (); //collapses item
$w ( “#itemYOUWANTOHIDE” ). hide (); //hides item
$w ( “#yourBUTTONnameHERE” ). label = “SHOW” ; //changes label of button back to show
} else {
if ( $w ( “#itemYOUWANTTOHIDE” ). hidden ) {
$w ( “#itemYOUWANTOHIDE” ). expand (); //expands item
$w ( “#itemYOUWANTOHIDE” ). show (); //shows item
$w ( “#yourBUTTONnameHERE” ). label = “HIDE” ; //changes label of button back to hide
}
}
}

3

Thank you, but I am not quite sure what the collapsing vs. hiding does. Also, I am using a switch feature instead of a button. This is what I have so far

2880×1338 361 KB

4

I see. You can make it a little more simple then I think and drop the part that checks on the current status and the updated label with something like below.

The difference between hide and collapse as I understand it is that hide keeps a place holder on the page for an item and collapse doesn’t. If you were hiding an entire strip but not collapsing it then the deadspace from the strip would still show. I usually play with one or the other or both to see how it works best for what I’m trying to achieve.

export function yourSWITCHNAME ( event ) {
if ( $w ( ‘#yourSWITCHNAME’ ). checked ) {
$w ( ‘#itemYOUWANTTOHIDE’ ). expand ()
//next item to expand
} else
$w ( “#itemYOUWANTTOHIDE” ). collapse ()
//next item to collaps
}

5

I tried that, but when I would click on my switch, nothing would happen. I was also trying this… but it made one of my elements disappear right away and then it never came back when I clicked the switch

$w . onReady ( function () {
if ( $w ( ‘#switch1’ ). checked ) {
$w ( ‘#image1’ ). expand ();
$w ( ‘#box51’ ). collapse ();
$w ( “#box52” ). collapse ();
//next item to expand
} else
$w ( “#image1” ). collapse ();
$w ( “#box52” ). expand ();
$w ( ‘#box53’ ). expand ();

    //next item to collaps 
}

);

I also tried this one, but it did not work either

export function switch1 ( event ) {
if ( $w ( ‘#switch1’ ). checked ) {
$w ( ‘#box52’ ). expand ()

//next item to expand
} else
$w ( “#box52” ). collapse ()

//next item to collaps
}

6

The first one makes sense why it doesn’t work and has the behavior you described. It launches once the page loads then checks to to see if the slider is in the on position. If it is, then it hides box51 and 52 it it isn’t check then it expands box 52 and 53. It only triggers when the page loads, not when toggled.

The second is the better approach. There is another part to adding actions like you have shown. Putting the code in for the Export Function switch1 is not enough. You have to also manually add the action in the developer console. If you haven’t already done that then you can by clicking the element (Switch) then in the bottom right hand corner of the developer pain you click to add the onChange action. If you haven’t done that then you definitely must. It will add the code again to the bottom of your page. Copy in the relevant parts and try again.

7

Hey there …

You need to use the switch’s onChange event handler to run your code,

// #1: Creating an event handler
$w('#switchToggle').onChange(event => {
    // #2: Get the switch's current status 
    const switched = event.target.switched; // Either "true" or "false";
    
    // #3: Check whether the swithc is turned on, or off
    if (switched) {
        // The switch is turned on, show the elements
    } else {
        // The switch is turned off, hide the elements
    }
})

Don’t forget to place this code inside the page’s onReady event handler.

Hope this helps~!
Ahmad

8

Thank you! So, I was able to get the orange item to collapse when the switch is turned off, but I am trying to do the opposite for the green one and it is not working. I basically want the green one to be revealed when the orange one collapses (As a result of the switch). I set the green to be collapsed when the page loads and it works the first time the switch turns on, but not after that.

2880×1338 292 KB