Velo Tutorial: Hiding an Element on Certain Pages

This tutorial explains how you can use Velo to show an element on all pages except for some of them. In other words, you have an element on your site that is part of a global section (Wix Studio), or that is set to show on all pages (Wix Editor), and you want to hide it on one or more of your pages.

Note that some elements appear on all pages by default based on their functionality, without this setting (for example, the Wix Chatbox). These elements don't require this setting. You can still use the code in this tutorial to hide them.

This tutorial has 2 parts:

• Instructions on how to get set up, including code you can copy and paste onto your page
• An explanation of what each line of code does

Instructions

1. Start with an element that is part of a global section (Wix Studio), or is set to show on all pages (Wix Editor).
2. Navigate to a page where you don't want that element to appear.
3. Copy the code below and paste it in your page code under the line that says "// TODO: write your JavaScript here…"

1. Make sure to make this substitution:
   • #myElement: the ID of the element that you want to hide on the current page (hover over it to see its ID)
2. Publish the site and view the page to make sure the element does not appear.

If you want to hide other elements, just add all their element IDs to the line of code, like this:

Understanding the Code

The image below shows what the code looks like in the code editor.

Line 3 calls the onReady() function. This defines the code that will run when the page is finished loading.

Line 5 calls the hide() function, which sets the element's hidden property to true. This means the element will not be displayed on this page even if the element is part of a global section (Wix Studio), or is set to "Show on all pages" (Wix Editor).

If you decide you want to display the element, you can change the hide() function to show().

One thing to keep in mind is this: a hidden element still takes up room on the page. In other words, depending on the layout of your page, even though the element is hidden, it could still leave a gap. Instead of hiding your element, you can use the collapse() function, because a collapsed element does not take up any space on the page.