Search.../
  1. APIs

collapsed

Indicates if the element is collapsed or expanded.

Description

If collapsed is true, the element is not displayed on the page under any circumstances. However, the collapsed element is still in the site's DOM. Unlike a hidden element, a collapsed element doesn't take up any space on the page. When collapsed, elements positioned within 70 pixels below the collapsed element and each other move up to take the collapsed element's place where possible. The elements that move up maintain their positions relative to one another.

If collapsed is false, the element may be displayed on the page. Elements that moved up to take the collapsed element's place on the page are moved back down.

However, an expanded element (an element whose collapsed property is false) is still not displayed if:

  • It is hidden.
  • 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 collapsed property is false, it's displayed when the conditions no longer apply.

To set the collapsed property on an element, use the element's collapse() and expand() functions.

If you select Collapsed on load in the element's Properties panel in the Editor, the collapsed property is set to true when the page loads.

Type:

booleanRead Only
Mixed in from:$w.CollapsedMixin

Related Content:

collapse( ), expand( ), hide( ), show( ), hidden

Was this helpful?

Get an element's collapsed status

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

Copy Code
1if( $w("#myElement").collapsed ) {
2  $w("#myElement").expand();
3}
4else {
5  $w("#myElement").collapse();
6}