This tutorial explains how you can use 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 (Wix Editor), or that is part of a (Wix Studio), 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 (Wix Editor), or that is part of a (Wix Studio).
- Navigate to a page where you don't want that element to appear.
// Hides the element when the page loads$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:
// Hides these elements when the page loads$w("#myElement, #myElement2, ...").hide();
The image below shows what the code looks like in the Code panel.
Line 3 calls the function. This defines the code that will run when the page is finished loading.
Line 5 calls the
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" (Wix Editor) or that is part of a global section (Wix Studio). function, which sets the element's
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 function, because a collapsed element does not take up any space on the page.