ElementsElement Properties & MethodsSettings

Set visibility (Beta)

element.setVisibility(visibility)

Set the visibility of an element, or bind its visibility state to a data source.

Verify that the element has the visibility property before calling this method.

Beta

These methods are in public beta and may change with future releases.

Syntax

element.setVisibility(visibility: boolean): Promise<null>
element.setVisibility(binding: BindingInput): Promise<null>

Related types:

type BindingInput =
  | { sourceType: 'prop'; propId: string }
  | { sourceType: 'cms'; collectionId: string; fieldId: string }
  | { sourceType: 'page'; fieldKey: string }
  | { sourceType: 'locale'; fieldKey: string }
  | { sourceType: 'localeItem'; fieldKey: string };

Parameters

  • visibility: boolean | BindingInput — true to show the element or false to hide it. Pass a BindingInput object to bind the visibility to a data source such as a CMS boolean field or component prop.

Returns

Promise<null>

A promise that resolves to null on success.

Example

const element = await webflow.getSelectedElement();
if (element?.visibility) {
  // Hide the element
  await element.setVisibility(false);
  // Show the element
  await element.setVisibility(true);
  // Bind visibility to a CMS boolean field
  await element.setVisibility({
    sourceType: 'cms',
    collectionId: 'col_abc',
    fieldId: 'field_xyz',
  });
}

Designer Ability

Designer AbilityLocaleBranchWorkflowSitemode
canDesignPrimaryMainCanvasDesign