# Visibility Actions

## Goals

* Show a hidden element
* Hide a visible element
* Toggle the visibility of an element  

## Action Attributes 

{% hint style="danger" %}
UNDER SPECIFICATION.  
{% endhint %}

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 |                            |

{% hint style="warning" %}
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. 
{% endhint %}

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/display)...

* `block` ( default ) 
* `flex` 
* `grid` 
* `inline-block` 
* *etc.* 

{% hint style="success" %}
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. 
{% endhint %}

### 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