hide and show elements using toggles

Ask the community
,
1

hello! I want to make it so that users can customize the interface themselves. I use the “hide if …, show if …” system. Perhaps this can reduce the speed of the site, but there are few such elements. All this should be controlled by switches, information should be saved in the user’s account, but since I’m a complete zero in Wix Corvid (and in general in programming) I don’t really understand how to do this. I also used a code to hide and show items if the user is logged in. I think the code will be similar.

905×385 18.7 KB

2

https://www.media-junkie.com/switch-safe-function

$w.onReady(function () {
    $w('#switch1, #switch2, #switch3').onChange((event)=>{
        let selection = event.target.id
        console.log(selection)
        if ($w('#switch1').checked) {
            $w('#boxCONTROL1').style.backgroundColor = "rgba(100,255,100,0.8)", 
            $w('#TXTcode').show()
        } 
        else {
            $w('#boxCONTROL1').style.backgroundColor = "rgba(155,155,155,0.8)",
            $w('#TXTcode').hide()
        }
        if ($w('#switch2').checked) {
            $w('#boxCONTROL2').style.backgroundColor = "rgba(100,255,100,0.8)",
            $w('#boxLINK').show()
        } 
        else {
            $w('#boxCONTROL2').style.backgroundColor = "rgba(155,155,155,0.8)",
            $w('#boxLINK').hide()
        }
        if ($w('#switch3').checked) {
            $w('#boxCONTROL3').style.backgroundColor = "rgba(100,255,100,0.8)";
        } 
        else {$w('#boxCONTROL3').style.backgroundColor = "rgba(155,155,155,0.8)";}
    })



    $w('#switch1, #switch2, #switch3').onMouseIn((event)=>{
        let selection =event.target.id
        console.log(selection)
        if (selection==="switch1") {$w('#TXTselection').text = selection;} 
        if (selection==="switch2") {$w('#TXTselection').text = selection;}
        if (selection==="switch3") {$w('#TXTselection').text = selection;}
    })
});

Now it’s your turn.

Complete the example and connect the SAVE-BUTTON to your DATABASE, to enable the save-function.

Good-Luck

3

Thank you!

4

@frogtv14
No problem :wink:

Of course this is just an simple-example.
You can improve your code a lot.

For example: —> using CASE+BREAK code-structure.

You will find an example of what i mean, here in this example…
https://www.media-junkie.com/simple-megamenu