Velo Tutorial: Hiding an Element on Certain Pages
Visit the Velo by Wix website to onboard and continue learning.
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 set to show on all pages 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
The functionality described in this tutorial works only on your published site.
- Start with an element that is set to show on all pages.
- Go to a page where you don't want that element to appear.
- Open the Code panel of the page (you can just drag it up from the bottom).
1// Hides the element when the page loads 2$w("#myElement").hide();
- 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)
- 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:
1// Hides these elements when the page loads 2$w("#myElement, #myElement2, ...").hide();
Understanding the Code
The image below shows what the code looks like in the Code panel.
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 set to "Show on all pages".
If you decide you want to display the element, you can change the
hide() function to
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.
Did this help?