> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Coupling element visibility to components

> The visibility attribute automatically shows and hides any HTML element together with ws-search-result, ws-suggest-result or ws-filter.

The `visibility` attribute links the visibility of any HTML element with the visibility of a component. If the referenced component is shown or hidden, the element follows automatically - or, with `:inverse`, shows the opposite. A typical use case is showing/hiding headings, tab buttons, or container areas depending on `ws-search-result`.

The attribute can be set on any HTML element.

## Prerequisite

* JavaScript bundle `ws-search-component-x.x.x.js` from version **1.9.1**

## Syntax

In the following notations, `component` stands for the name of the referenced component, `source` for a single source of a multi-source component, and `name` for the name of a filter:

| **Notation**                     | **Behavior**                                                                                        |
| -------------------------------- | --------------------------------------------------------------------------------------------------- |
| `visibility="component"`         | Element follows the visibility state of the component.                                              |
| `visibility="component:inverse"` | Element shows the opposite: visible when the component is hidden.                                   |
| `visibility="component-source"`  | For multi-source components, a single source is referenced, for example `ws-search-result-product`. |
| `visibility="ws-filter-name"`    | For filters, the filter name is referenced, for example `ws-filter-brand`.                          |

Available as component references are: [ws-search-result](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result), [ws-suggest-result](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result), and [ws-filter](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter).

## Examples

**ws-search-result**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div visibility="ws-search-result">
  Is shown when a ws-search-result is visible
</div>

<div visibility="ws-search-result:inverse">
  Is shown when all ws-search-result are hidden
</div>

<div visibility="ws-search-result-product">
  Is shown when ws-search-result[source="product"] is visible
</div>

<div visibility="ws-search-result-product:inverse">
  Is shown when ws-search-result[source="product"] is hidden
</div>
```

**ws-suggest-result**

The use with `ws-suggest-result` works analogously to `ws-search-result`, for example `visibility="ws-suggest-result-category"`.

**ws-filter**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div visibility="ws-filter-brand">
  Is shown when ws-filter[name="brand"] is visible
</div>

<div visibility="ws-filter-brand:inverse">
  Is shown when ws-filter[name="brand"] is hidden
</div>
```

<Info>
  If `visibility` refers to a component with multiple sources (for example `visibility="ws-search-result"` without a source suffix), the following applies: The element is visible when at least one source is visible, and is only hidden when all sources are hidden.
</Info>

## Superseded attributes and workarounds

`visibility` replaces the previous mechanisms for controlling visibility. These continue to work but should no longer be used in new projects:

* [hide-with](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result#hide-with) (deprecated): behaves like `visibility="component"`, but does not support `:inverse`.
* [filter-container](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filters#sichtbarkeit-von-filtern-ausblenden) and [suggest-container](/en/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest#suggest-container): workarounds that are replaced by `visibility` but remain usable.