collapsed

Indicates if the element is collapsed or expanded.

Description

If collapsed is true, the element is not displayed on the app under any circumstances. Unlike a hidden element, a collapsed element doesn't take up any space on the app.

If collapsed is false, the element may be displayed on the app.

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.

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 determine if the element is actually visible, use the isVisible property.

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 app loads.

Type:

booleanRead Only

Mixed in from:$w.MobileHiddenCollapsedMixin

Was this helpful?

Get an element's collapsed status

Copy Code

1let isCollapsed = $w("#myMobileElement").collapsed; // false

Toggle an element's collapsed state

Copy Code

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