Automatically close the last opened multi state box

Ask the community
1

Hello all. I am very new to wix and am trying to set up a page utilizing a series of multi state boxes (MSB). Via tutorials, I am able to set up each MSB to close and open on a click. I would however like to be able to automatically close the last opened MSB when a new is clicked.

Current code is as follows:
// MSB-1
$w(‘#vectorImage1’).onClick(() => {
$w(‘#statebox8’).changeState(“State2”);
})

$w('#vectorImage2').onClick(() => {
    $w('#statebox8').changeState("State1");
})


// MSB-2
$w('#vectorImage3').onClick(() => {
    $w('#statebox9').changeState("state2");
})

$w('#vectorImage5').onClick(() => {
    $w('#statebox9').changeState("state1");
})

Would greatly appreciate any input.
Thanking you in advance.

2

Hey @Cindy_C,

You can try this approach

let lastOpenedMSB = null;

// MSB-1
$w('#vectorImage1').onClick(() => {
    if (lastOpenedMSB) {
        lastOpenedMSB.changeState("State1");
    }
    $w('#statebox8').changeState("State2");
    lastOpenedMSB = $w('#statebox8');
});

// MSB-2
$w('#vectorImage3').onClick(() => {
    if (lastOpenedMSB) {
        lastOpenedMSB.changeState("state1");
    }
    $w('#statebox9').changeState("state2");
    lastOpenedMSB = $w('#statebox9');
});

In the above example, i’ve added a lastOpenedMSB variable which keeps track of the last opened MSB. When a new MSB is clicked, you first check if there’s a last opened MSB. If there is, we change its state to close it. Then, you change the state of the newly clicked MSB to open it, and finally, you update the lastOpenedMSB variable to store the reference to the newly opened MSB. It might not be exactly what you’re looking for, but I think it’s a step in the right direction for you.

1 Like
3

Hey @RobertHamilton

Really appreciate your reply. I believe you understand exactly what I am looking for. However adopting your example code above did not provide the outcome I am looking for. With the above example code, it now changes the MSB to state 2 on click but is not closed automatically when a new MSB is opened and am unable to close the opened MSB manually as well. Applying my initial code with the 2nd click event to manually close the MSB after your example code above allows me to close them manually however I am back to square one. However your guidance certainly drove me in the right direction. I am now able to implement what I am looking for with the below code:

let lastOpenedMSB = null;
// WSB-1
$w(‘#vectorImage1’).onClick(() => {
if (lastOpenedMSB){
lastOpenedMSB.changeState(“state3”);
lastOpenedMSB.changeState(“state5”);
}
$w(‘#statebox8’).changeState(“state2”);
lastOpenedMSB = $w(‘#statebox8’);
});

$w('#vectorImage2').onClick(() => {
   $w('#statebox8').changeState("state1");
})


// WSB-2
$w('#vectorImage3').onClick(() => {
    if (lastOpenedMSB) {
    lastOpenedMSB.changeState("state1");
    lastOpenedMSB.changeState("state5");

}
$w('#statebox9').changeState("state2");
lastOpenedMSB = $w('#statebox9');

})

$w('#vectorImage5').onClick(() => {
    $w('#statebox9').changeState("state3");
})

// WSB-3
$w('#vectorImage6').onClick(() => {
     if (lastOpenedMSB){
        lastOpenedMSB.changeState("state1");
        lastOpenedMSB.changeState("state3");
    
    }
    $w('#statebox10').changeState("state6");
    lastOpenedMSB = $w('#statebox10');
});

$w('#vectorImage7').onClick(() => {
    $w('#statebox10').changeState("state5");
})

Is there a way to simplify the above code as I add more WSB(s)?