> For the complete documentation index, see [llms.txt](https://one-loop.gitbook.io/help/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/inhalte-auf-webseiten-per-button-ein-und-ausblenden.md).

# Inhalte auf Webseiten per Button ein- und ausblenden

Mit einer Schaltfläche kannst du zusätzliche Informationen erst dann zeigen, wenn eine Person sie wirklich öffnen möchte. Umgekehrt lässt sich ein bereits sichtbarer Bereich nach einem Klick ausblenden. So bleibt eine Seite aufgeräumt, ohne dass wichtige Details verlorengehen.

Typische Beispiele sind Antworten auf häufige Fragen, Zusatzinformationen zu einer Leistung oder ein kurzer Hinweis, der erst nach einer Entscheidung sichtbar werden soll. Die Schaltfläche verändert nur die Sichtbarkeit der von dir ausgewählten Inhalte auf derselben Seite; sie öffnet keine zweite Seite und veröffentlicht nichts automatisch.

## Was vor dem Start bereitstehen muss

Du brauchst eine bearbeitbare Website oder einen Funnel sowie:

* eine **Schaltfläche**, die den Klick auslöst;
* den Inhalt, der sich ändern soll – zum Beispiel ein Text, Bild, Formular, eine Zeile, Spalte oder ein ganzer Abschnitt;
* eine klare Entscheidung, ob der Inhalt beim Laden der Seite schon sichtbar sein oder zunächst verborgen bleiben soll.

Die Einstellung wird direkt am ausgewählten Element vorgenommen. Prüfe daher immer, welches Element gerade orange umrandet ist, bevor du eine Aktion speicherst.

> **Wichtig:** Ein Element kann nur über die Auswahl **Einblenden** ausgewählt werden, wenn es vorher in seinen Sichtbarkeitseinstellungen verborgen wurde. Ist die Liste für einzublendende Elemente leer, fehlt genau dieser Vorbereitungsschritt.

## Einen Bereich nach einem Klick ausblenden

Diese Variante passt, wenn ein sichtbarer Hinweis, ein Textblock oder ein Abschnitt nach dem Klick verschwinden soll.

1. Öffne die gewünschte Seite im Website- oder Funnel-Editor.
2. Klicke auf die Schaltfläche, die den Ablauf starten soll.
3. Öffne rechts den Reiter **Allgemein** und den Bereich **Button-Aktionen**.
4. Wähle im Auswahlfeld für die Zielaktion **Elemente ein- und ausblenden**.
5. Öffne unter **Elemente ausblenden** die Auswahl und markiere den gewünschten Inhalt. Je nach Aufbau der Seite kannst du ein einzelnes Element, einen Abschnitt, eine Spalte oder eine Zeile auswählen.
6. Speichere die Änderung und öffne die Vorschau über das Augensymbol oben im Editor.
7. Klicke dort auf die Schaltfläche. Der ausgewählte Inhalt muss danach nicht mehr sichtbar sein.

Du kannst in der Aktion mehrere Bereiche auswählen. Die aktuelle Originalansicht zeigt dafür eine Liste aller passenden Seitenelemente, Abschnitte, Spalten und Zeilen. Wähle aber nur Inhalte, die gemeinsam verschwinden sollen – sonst wird die Wirkung für Besucher schnell unverständlich.

## Einen zunächst verborgenen Bereich einblenden

Diese Variante ist sinnvoll für weiterführende Informationen: Die Seite startet kompakt, und die Person öffnet bei Interesse den zusätzlichen Bereich selbst.

### 1. Zielinhalt zuerst verbergen

1. Klicke im Editor auf den Inhalt, der erst später erscheinen soll.
2. Wechsle rechts zu **Stile**.
3. Öffne den Bereich **Sichtbarkeit**.
4. Stelle die Sichtbarkeit für die Ansicht ein, in der der Inhalt verborgen starten soll. Die Einstellungen unterscheiden zwischen Desktop und Mobilansicht.
5. Wiederhole die Einstellung für die andere Ansicht, wenn der Inhalt auf beiden Geräten zunächst unsichtbar sein soll.

Im Editor erkennst du den Zustand an den Sichtbarkeits-Symbolen. Ein graues Symbol zeigt, dass der Inhalt in dieser Ansicht verborgen ist.

### 2. Schaltfläche mit dem Ziel verbinden

1. Wähle die Schaltfläche aus.
2. Öffne **Allgemein** → **Button-Aktionen**.
3. Stelle die Zielaktion auf **Elemente ein- und ausblenden**.
4. Wähle unter **Elemente einblenden** den zuvor verborgenen Inhalt aus.
5. Speichere und öffne die Vorschau.

Klickt eine Person auf die Schaltfläche, erscheint der ausgewählte Inhalt direkt auf der Seite. Die Schaltfläche selbst bleibt dabei bestehen, sofern du sie nicht zusätzlich als auszublendendes Element auswählst.

## Desktop und Mobilansicht richtig prüfen

Die Sichtbarkeit ist je Ansicht steuerbar. Deshalb gehört ein Test auf beiden Geräten zum Ablauf:

1. Öffne die Vorschau über das Augensymbol oben im Editor.
2. Klicke die Schaltfläche in der Desktopansicht und prüfe, ob genau der erwartete Bereich erscheint oder verschwindet.
3. Wechsle in die Mobilansicht und wiederhole den Klick.
4. Kontrolliere anschließend, ob nach dem Einblenden genug Abstand vorhanden ist und der nachfolgende Inhalt lesbar bleibt.
5. Speichere die Seite erst, wenn beide Ansichten zum gewünschten Ergebnis führen.

## Versehentlich verborgene Inhalte wiederfinden

Ist ein Element verborgen, lässt es sich auf der Arbeitsfläche möglicherweise nicht mehr anklicken. Du musst die Seite deshalb nicht neu bauen:

1. Klicke oben links auf **Ebenen** – das Symbol mit den gestapelten Flächen.
2. Suche in der Struktur den verborgenen Bereich. Verborgene Elemente sind dort an einem Sichtbarkeits-Symbol erkennbar.
3. Wähle das Element in der Ebenenliste aus.
4. Stelle die Sichtbarkeit wieder her. Die aktuelle Originalansicht zeigt dafür das Augen-Symbol in der oberen Leiste des Editors; je nach Ansicht findest du die Einstellung zusätzlich im Bereich **Stile** → **Sichtbarkeit**.
5. Schalte Desktop und Mobil einzeln wieder ein, wenn der Inhalt auf beiden Geräten erscheinen soll.
6. Prüfe anschließend in der Vorschau, ob der Bereich wieder an der richtigen Stelle erscheint.

## Was nach einem Klick für Besucher passiert

* Bei **Ausblenden** verschwindet der gewählte Inhalt nach dem Klick aus der aktuellen Ansicht.
* Bei **Einblenden** wird der zuvor verborgene Inhalt direkt an seiner vorgesehenen Stelle sichtbar.
* Die Schaltfläche bleibt stehen, sofern du sie nicht selbst als auszublendendes Ziel ausgewählt hast.
* Die Sichtbarkeit für Desktop und Mobil muss separat geprüft werden.

Beschrifte die Schaltfläche so, dass Besucher die Folge verstehen, etwa **Details anzeigen** oder **Antwort ausblenden**. Eine unklare Beschriftung führt leicht dazu, dass Inhalte übersehen werden.

## Praxisbeispiel: Zusätzliche Antwort erst auf Wunsch zeigen

Auf einer Seite steht die Frage „Wie läuft der erste Termin ab?“. Die ausführliche Antwort soll nicht sofort viel Platz einnehmen.

1. Lege unter der Frage einen Textblock mit der Antwort an.
2. Verberge diesen Textblock unter **Stile** → **Sichtbarkeit** für Desktop und Mobilansicht.
3. Platziere darüber eine Schaltfläche mit der Beschriftung „Antwort anzeigen“.
4. Wähle an der Schaltfläche unter **Button-Aktionen** die Aktion **Elemente ein- und ausblenden**.
5. Wähle den verborgenen Antwort-Text unter **Elemente einblenden** aus.
6. Öffne die Vorschau: Vor dem Klick ist nur die Frage mit der Schaltfläche sichtbar. Nach dem Klick erscheint die Antwort darunter.

So können Besucher selbst entscheiden, welche Details sie lesen möchten, während die Seite zunächst ruhig und übersichtlich bleibt.

## Häufige Fehler und schnelle Lösung

| Beobachtung                                              | Wahrscheinliche Ursache                                                                | Lösung                                                                                                               |
| -------------------------------------------------------- | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
| Die Liste für **Elemente einblenden** ist leer.          | Der Zielinhalt wurde noch nicht verborgen.                                             | Zielinhalt auswählen und unter **Stile** → **Sichtbarkeit** in der gewünschten Ansicht verbergen.                    |
| Der Klick verändert nur die Desktopansicht.              | Die Sichtbarkeit wurde nur für eine Ansicht eingestellt.                               | Desktop und Mobilansicht separat prüfen und die Sichtbarkeit passend setzen.                                         |
| Ein Bereich ist im Editor nicht mehr auffindbar.         | Er wurde verborgen und ist auf der Fläche nicht anklickbar.                            | Über **Ebenen** auswählen und die Sichtbarkeit wiederherstellen.                                                     |
| Nach dem Klick erscheinen zu viele oder falsche Inhalte. | In der Aktion wurden mehrere Ziele ausgewählt oder das falsche Element war ausgewählt. | Schaltfläche erneut auswählen, die Listen für Ein- und Ausblenden prüfen und nur die beabsichtigten Ziele markieren. |

## Grenzen der Funktion

Die Einstellung verändert die Sichtbarkeit von Seitenelementen nach einem Klick. Sie eignet sich für eine klarere Darstellung von Inhalten, ersetzt aber keine getrennten Seiten oder einen eigenen Zugang für unterschiedliche Zielgruppen. Plane den Ablauf daher so, dass die Seite auch ohne zusätzlichen Klick verständlich bleibt und die Schaltfläche eindeutig beschreibt, was danach passiert.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

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

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://one-loop.gitbook.io/help/plattform/one-loop-plattform/websites-und-leadgewinnung/websites-und-funnels/inhalte-auf-webseiten-per-button-ein-und-ausblenden.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.