Toggle switch that can hide and show image?

Ask the community
,
1

Can anyone help a bro out with a code that hides and shows an image by utilizing a toggle switch?

Any help would be appreciated, God Bless!

2

Hi @kazualkazh ,

Here is an easy solution:

$w.onReady(function () {
     $w("#switch1").onClick(() => {
      if ($w("#switch1").checked) {
            $w("#image9").show()
      } else {
            $w("#image9").hide()
        }
    })
});

For such examples you can use the forum or articles search - it may bring examples that you need to adjust or simply to use as is.

For example: https://www.wix.com/corvid/forum/community-discussion/hide-or-show-element

Thanks.

3

Thank you Alexander, this worked to perfection! Appreciate your help

4

How do you toggle out & in an entire row in a WIX database?

5

Do you want to toggle it from being shown to the user, or shown in the database?

Also, should the toggle be on a webpage, or each row have a toggle on them to show/not show

6

@simen
Hi Simen!

Thanks for your response! Below I answer your questions and a screen shot.

2104×408 63.5 KB

Question: Do you want to toggle it from being shown to the user, or shown in the database?

Answer: I would like the data to be hidden from the user.

Question: Also, should the toggle be on a webpage, or each row have a toggle on them to show/not show?

Answer: I would like the toggle to be specific to each row.

The image data and text fields are on a different page. This is why I think it would better to target the database. That’s group is a listing and should be removed so there is no gap showing on that page… as though I deleted that row but the row is still there in WIX Database.

7

Hi Everyone,

Not sure if anyone else is having the same technical issue but can’t create my own post for some reason so seeing the expertise here think its the right place…!

Would be really grateful of some help with this.

Currently I have a vector image set to unmute a background video on the page below bottom right with the label #Sound

https://www.beyonddesignagency. com/dance-with-me-short-film

It is successfully unmuting an autoplay video in the background for both desktop (videoBox2) and tablet / mobile (videoBox1).

The code is below:

export function Sound_click( event ) { $w( “#videoBox2” ).unmute(); $w( “#videoBox1” ).unmute();

}

What I would ideally like to do is make this a toggle on / off - mute / unmute button but I can’t seem to find the code for this?

I don’t want to have two separate buttons for this, which could be achieved using the reverse of the code above and ideally another image would swap in to indicate the off state when its initiated.

Any pointers?

Many thanks!

8

Already tried to use a switch-button, instead of a normal button?

9

Does this mean you have to have a visual toggle switch or can the function be used to show two different images?