Search.../
  1. APIs

hidden

Indicates if the element is visible or hidden.

Description

If hidden is true, the element is not displayed on the page under any circumstances. However, the hidden element is still in the site's DOM. Unlike a collapsed element, a hidden element continues to take up the same space on the page as it did when it was visible.

If hidden is false, the element may be displayed on the page.

However, an element whose hidden property is false is still not displayed if:

  • It is collapsed.
  • Its parent element is hidden or collapsed.
  • It is a slide in a Slideshow which is currently not being displayed.
  • In Editor X, it has been marked as "Don't Display" for the current breakpoint.

Even if the element is not displayed due to the conditions mentioned above, if its hidden property is set to false, it's displayed when the conditions no longer apply.

To determine if the element is actually visible, use the isVisible property.

To set the hidden property on an element, use the element's hide() or show() functions.

If you select Hidden on load in the Properties and Events panel in the Editor, the hidden property is set to true when the page loads.

Note: An element's hidden property is not the same as its isVisible property. The hidden property indicates whether the element should be displayed, while isVisible indicates if it is actually displayed.

Type:

booleanRead Only

Related Content:

hide( ), show( ), collapse( ), expand( ), collapsed, rendered

Was this helpful?

Get an element's hidden status

Copy Code
1let isHidden = $w("#myElement").hidden;  // false
Toggle an element's hidden state

Copy Code
1if( $w("#myElement").hidden ) {
2  $w("#myElement").show();
3}
4else {
5  $w("#myElement").hide();
6}