Element remains visible when it should be hidden

Ask the community
,
1

I have a number of over-lapping containers that show/hide when a button is clicked. The first container I don’t want to have hidden on load, but I do want it to be hidden when the show/hide events are triggered on the remaining containers. At the moment the first container remains in a show state even when the other containers are also visible.

Here is my code:

export function button33_onClick(event) {
    if ($w('#box28').hidden) {
        $w('#box28').show();
    } else {
        $w('#box28').hide();
    }
}

Any advice how to change it to do what I want would be appreciated.

2

All you are doing with the above code is telling your page to show box28 if it is hidden.
https://www.wix.com/corvid/reference/$w.HiddenMixin.html

Also, depending on what you are doing on your page, you might want to look at using collapse and expand instead of hide and show, so that the collapsed elements are not taking up any room on your page, whereas when they are in the hidden state they are.
https://www.wix.com/corvid/reference/$w.CollapsedMixin.html

Is that what you actually want or do you want other boxes to be hidden and shown at different times? If so, then you will need to do something like this

export function button33_onClick(event) {
$w('#box28').show();
$w('#box29').hide();
$w('#box30').hide();
}

export function button34_onClick(event) {
$w('#box28').hide();
$w('#box29').show();
$w('#box29').show();
}

I’ve got something similar on my members page that looks like this below, so there is more than one way to do this.

$w.onReady( () => {
if(wixUsers.currentUser.loggedIn) {
$w("#loginbutton").label = "Logout";
$w("#membersareaonlystrip").expand();
$w("#whitegapforfooter").hide();
}
else{
$w("#loginbutton").label = "Login";
$w("#membersareaonlystrip").collapse();
$w("#whitegapforfooter").show();
}
} );
3

Thank you very much!

4

@givemeawhisky What you wrote here looks exactly what im trying to do! I have a site where once a member signs in, there is a “blurred” image i want removed and the new member gets to see what’s behind the image. but i don’t know how to code that. Is the code you shared above what I need to use? I can share my site if that helps. Thanks :slight_smile: