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

# Sichtbarkeit von Elementen an Komponenten koppeln

> Das visibility-Attribut blendet beliebige HTML-Elemente automatisch mit ws-search-result, ws-suggest-result oder ws-filter ein und aus.

Das Attribut `visibility` verknüpft die Sichtbarkeit eines beliebigen HTML-Elements mit der Sichtbarkeit einer Komponente. Wird die referenzierte Komponente ein- oder ausgeblendet, folgt das Element automatisch - oder zeigt mit `:inverse` das Gegenteil. Typischer Anwendungsfall ist das Ein-/Ausblenden von Überschriften, Tab-Buttons oder Container-Bereichen in Abhängigkeit von `ws-search-result`.

Das Attribut kann auf jedem HTML-Element gesetzt werden.

## Voraussetzung

* JavaScript-Bundle `ws-search-component-x.x.x.js` ab Version **1.9.1**

## Syntax

In den folgenden Schreibweisen steht `komponente` für den Namen der referenzierten Komponente, `source` für eine einzelne Quelle einer Multi-Source-Komponente und `name` für den Namen eines Filters:

| **Schreibweise**                  | **Verhalten**                                                                                                   |
| --------------------------------- | --------------------------------------------------------------------------------------------------------------- |
| `visibility="komponente"`         | Element folgt dem Sichtbarkeitsstatus der Komponente.                                                           |
| `visibility="komponente:inverse"` | Element zeigt das Gegenteil: sichtbar, wenn die Komponente versteckt ist.                                       |
| `visibility="komponente-source"`  | Bei Multi-Source-Komponenten wird eine einzelne Quelle referenziert, beispielsweise `ws-search-result-product`. |
| `visibility="ws-filter-name"`     | Bei Filtern wird der Filtername referenziert, beispielsweise `ws-filter-brand`.                                 |

Als Komponenten-Referenz verfügbar sind: [ws-search-result](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-search-result), [ws-suggest-result](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result) und [ws-filter](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter).

## Beispiele

**ws-search-result**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div visibility="ws-search-result">
  Wird gezeigt, wenn ein ws-search-result sichtbar ist
</div>

<div visibility="ws-search-result:inverse">
  Wird gezeigt, wenn alle ws-search-result versteckt sind
</div>

<div visibility="ws-search-result-product">
  Wird gezeigt, wenn ws-search-result[source="product"] sichtbar ist
</div>

<div visibility="ws-search-result-product:inverse">
  Wird gezeigt, wenn ws-search-result[source="product"] versteckt ist
</div>
```

**ws-suggest-result**

Die Verwendung mit `ws-suggest-result` erfolgt analog zu `ws-search-result`, beispielsweise `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">
  Wird gezeigt, wenn ws-filter[name="brand"] sichtbar ist
</div>

<div visibility="ws-filter-brand:inverse">
  Wird gezeigt, wenn ws-filter[name="brand"] versteckt ist
</div>
```

<Info>
  Bezieht sich `visibility` auf eine Komponente mit mehreren Sources (beispielsweise `visibility="ws-search-result"` ohne Source-Zusatz), gilt: Das Element ist sichtbar, wenn mindestens eine Source sichtbar ist, und wird nur dann versteckt, wenn alle Sources versteckt sind.
</Info>

## Abgelöste Attribute und Workarounds

`visibility` ersetzt die bisherigen Mechanismen zur Sichtbarkeitssteuerung. Diese funktionieren weiterhin, sollten aber in neuen Projekten nicht mehr verwendet werden:

* [hide-with](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result#hide-with) (deprecated): verhält sich wie `visibility="komponente"`, unterstützt aber kein `:inverse`.
* [filter-container](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filters#sichtbarkeit-von-filtern-ausblenden) und [suggest-container](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest#suggest-container): Workarounds, die durch `visibility` ersetzt werden, aber weiterhin nutzbar sind.


## Related topics

- [ws-filter](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter.md)
- [ws-filters](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filters.md)
- [Komponenten & Sammlungen in strapi](/strapi-cms/komponenten-sammlungen-in-strapi.md)
- [ws-suggest-result](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-suggest-result.md)
- [ws-filter-toggle](/ws-search/integration-in-die-templates-storefront/webcomponents/ui-komponenten/ws-filter-toggle.md)