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

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

Related types:

1 type BindingInput =
2   | { sourceType: 'prop'; propId: string }
3   | { sourceType: 'cms'; collectionId: string; fieldId: string }
4   | { sourceType: 'page'; fieldKey: string }
5   | { sourceType: 'locale'; fieldKey: string }
6   | { 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

1 const element = await webflow.getSelectedElement();
2 
3 if (element?.visibility) {
4 
5   // Hide the element
6   await element.setVisibility(false);
7 
8   // Show the element
9   await element.setVisibility(true);
10 
11   // Bind visibility to a CMS boolean field
12   await element.setVisibility({
13     sourceType: 'cms',
14     collectionId: 'col_abc',
15     fieldId: 'field_xyz',
16   });
17 }

Designer Ability

Designer Ability	Locale	Branch	Workflow	Sitemode
canDesign	Primary	Main	Canvas	Design

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

1	type BindingInput =
2	\| { sourceType: 'prop'; propId: string }
3	\| { sourceType: 'cms'; collectionId: string; fieldId: string }
4	\| { sourceType: 'page'; fieldKey: string }
5	\| { sourceType: 'locale'; fieldKey: string }
6	\| { sourceType: 'localeItem'; fieldKey: string };

1	const element = await webflow.getSelectedElement();
2
3	if (element?.visibility) {
4
5	// Hide the element
6	await element.setVisibility(false);
7
8	// Show the element
9	await element.setVisibility(true);
10
11	// Bind visibility to a CMS boolean field
12	await element.setVisibility({
13	sourceType: 'cms',
14	collectionId: 'col_abc',
15	fieldId: 'field_xyz',
16	});
17	}