Visibility Actions

Show, hide, or toggle the visibility of an element.

Goals

• Show a hidden element

• Hide a visible element

• Toggle the visibility of an element

Action Attributes

UNDER SPECIFICATION.

e.g. sa-action-display-show = ( event name )

sa-action-display-hide	Hide the item	Adds style=display: none;
sa-action-display-show	Show the item	Adds style=display: block;
sa-action-display-toggle	Toggles the item visibility state

Works by using the display style property. Do not use it on elements that are targeted by Webflow interactions which affect the display style property, as it will conflict. In that situation, wrapping your elements in a DIV and using the SA5 attributes on that DIV is generally the recommended approach.

Data

sa-action-display:mode = ( mode )

Optional. One of...

• display ( default )

• visibility

• opacity

sa-action-display:display = ( display mode )

Optional. Any valid CSS display mode...

• block ( default )

• flex

• grid

• inline-block

• etc.

Used with a mode of display.

By default, displaying a hidden element sets the display to block. You can override this behavior here, which will be used both by sa-action-display-show and sa-action-display-toggle.

sa-action-display:opacity = ( min opacity )

Optional. Defaults to 0% ( fully hidden )

Future

• Hide and show

  • Display

  • Visibility

  • Opacity

• Transitions like fade-in / fade-out ?

• Separate visibility?

  • Or just rely on class adder