# visibility

> Controls the CSS `visibility` property: a `"hidden"` element keeps its layout box and can transition back to `"visible"`, which is what a selection indicator or hover-triggered surface needs to fade in place.

```ts
import { visibility } from "@sdxc/u/effects";
```

Controls the CSS `visibility` property: a `"hidden"` element keeps its
layout box and can transition back to `"visible"`, which is what a
selection indicator or hover-triggered surface needs to fade in place.

## Quick reference

Every documented call, beside the CSS it emits.

| Call | CSS |
| --- | --- |
| `u.visibility()` | `css({ visibility: "visible" })` |
| `u.visibility("hidden")` | `css({ visibility: "hidden" })` |

## Examples

### Basic example

Use `visibility("hidden")` to hide an element while it keeps its place in the layout:

```tsx
<div mix={[...]}>
	<div mix={[...]}>01</div>
	<div mix={[visibility("hidden"), ...]}>02</div>
	<div mix={[...]}>03</div>
</div>
```

### Showing on hover

Hide an element with `visibility("hidden")` and bring it back with `visibility()` in a state. Hover the row:

```tsx
<div mix={[hstack({ gap: 4, justify: "between" }), ...]}>
	<span>invoice-0425.pdf</span>
	<button
		type="button"
		mix={[
			visibility("hidden"),
			when(":is(:hover, :focus-within) > &", visibility()),
			...,
		]}
	>
		Remove
	</button>
</div>
```

### Collapsing table rows

Use `visibility("collapse")` on a table row to remove it from the table while its columns keep their widths:

```tsx
<table mix={[...]}>
	<tbody>
		<tr>
			<td>Ada</td>
			<td>Engineer</td>
		</tr>
		<tr mix={[visibility("collapse")]}>
			<td>Grace Brewster Murray</td>
			<td>Admiral</td>
		</tr>
		<tr>
			<td>Alan</td>
			<td>Mathematician</td>
		</tr>
	</tbody>
</table>
```

## Applying on a state

Wrap the call in a state utility to scope it to one selector.

```ts
u.hover(u.visibility())
```

## Responsive design

Wrap the call in a container query to scope it to one width.

```ts
u.at("md", u.visibility())
```

## Signature

```ts
u.visibility(value?: VisibilityValue)
```