# 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 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://attr.sygnal.com/overview/events/actions/visibility-actions.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.