Hide Show an object when needed

Ask the community
,
1

Looking for some way that I can hide or show a specific item on my web page when needed.

To clarify that and someone may have a better idea on how to do what I want, on my web site, I’m posting hours of operation for a Christmas Light show. The hours displayed are linked to a database table. Since the show isn’t up and running yet, I was thinking of overlaying the displayed hours with a slightly dimmed box with a message on this box saying “Not Currently Open”.

Now what I would like to do is have an easy way that I can just toggle the display of this overlaid box visible or not. So when my light show is active, I can easily change it without having to possibly go into the edit view and delete it, since after the season, I would want to redisplay this box.

Any ideas? I’m fairly new at this, so instructions would be very helpful also.

2

Hello John,

The first step is to turn on Developer Tools .

When you add an element to the page, it will have a unique ID that you can use to select it and manipulate it, in your case we want to hide/show.

Open up the code section of the editor at the bottom of the page, this is where you can write code to select certain elements.

Follow the instructions here for dealing with hiding/showing elements:
Box - Velo API Reference - Wix.com - Show
Box - Velo API Reference - Wix.com - Hide

If you run into any problems post the code you have here and we will help you through it!

Also here is a guide on doing exactly just that: https://www.wix.com/code/home/video-custom-interactions

Goodluck!

3

Thanks, that looks like exactly what I need. I will work on this tonight and see if I have any issues.

4

That did work for me. Thank you.