Visibility Actions 🧪

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

trigger:(event name):display-toggle

action:(event name):display-hide

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
sa-action-display-revert	Revert the item display state	Removes the display style on the element directly

Works by using `display attributes. Do not use it on elements that are targeted by Webflow interactions as they also use style.

Consider how to handle block, flex, grid

Use only on an element with display: block. If you are using e.g. flex or grid, use display:

wfu-action-unhide

Future

• Transitions like fade-in / fade-out ?

• Separate visibility?

  • Or just rely on class adder