---
title: Expandable
description: Expandable bietet eine einfache Ein-/Ausblendeumschaltung für Inhalte, die Leser sehen möchten, die aber für den Hauptfluss nicht essenziell sind.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Verwende Expandable, um ausführliche API-Antworten, Schritte zur Fehlerbehebung oder ergänzende Details auszublenden, die sonst den Lesefluss unterbrechen würden. Es wird als einzelnes anklickbares Auf- und Zuklappelement dargestellt. Expandable ist schlanker als Accordion, das für gruppierte, navigierbare Abschnitte entwickelt wurde.

Verwende Expandable, wenn:
- **Ergänzende Details** den Haupttext unterbrechen würden
- **Optionale Informationen** für einige, aber nicht für alle Leser hilfreich sind
- **Lange Inhalte** (z. B. vollständige API-Antworten) standardmäßig eingeklappt sein sollen

## Grundlegende Verwendung

<Expandable title="Weitere Details anzeigen">
  Diese Details sind standardmäßig ausgeblendet und werden beim Anklicken angezeigt.
</Expandable>

```mdx
<Expandable title="Show more details">
  These details are hidden by default and revealed when clicked.
</Expandable>
```

## Standardmäßig geöffnet

Beginne mit ausgeklapptem Inhalt:

<Expandable title="Standardmäßig erweitert" defaultOpen>
  Dieser Abschnitt ist von Anfang an sichtbar.
</Expandable>

```mdx
<Expandable title="Expanded by default" defaultOpen>
  This section starts visible.
</Expandable>
```

## Häufige Anwendungsfälle

### Details zu API-Antworten

Klappe ausführliche Antworten ein, die sonst den Dokumentationsfluss unterbrechen würden:

<Expandable title="Vollständige Antwort anzeigen">
```json
{
  "id": "123",
  "name": "Example",
  "metadata": {
    "created": "2024-01-01",
    "updated": "2024-01-15"
  }
}
```
</Expandable>

### Schritte zur Fehlerbehebung

<Expandable title="Verbindungsprobleme?">
  1. Überprüfe deine Netzwerkverbindung
  2. Stelle sicher, dass der API-Endpoint korrekt ist
  3. Vergewissere dich, dass dein API-Schlüssel gültig ist
</Expandable>

## Props

<ParamField name="title" type="string" required>
  Text der Abschnittsüberschrift.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Startet ausgeklappt.
</ParamField>

## Expandable im Vergleich zu Accordion

| Funktion | Expandable | Accordion |
|---------|------------|-----------|
| Zweck | Ergänzende Inhalte ausblenden | Abschnitte von gleicher Bedeutung organisieren |
| Symbole | Nein | Ja |
| Beschreibungen | Nein | Ja (Untertitel werden unterstützt) |
| Gruppierung | Eigenständig | Kann mit AccordionGroup gruppiert werden |
| Am besten geeignet für | Optionale Details, lange Beispiele | FAQs, Feature-Listen, Navigation |

**Faustregel:** Wenn der Inhalt „nice to have“ ist, verwende Expandable. Wenn Nutzer zwischen Abschnitten wählen müssen, verwende Accordion.

## Wie geht es weiter?

<Columns cols={2}>
  <Card title="Übersicht der Komponenten" icon="puzzle-piece" href="/de/components/overview">
    Alle verfügbaren Komponenten durchsuchen
  </Card>
  <Card title="MDX-Grundlagen" icon="file-code" href="/de/content/mdx-basics">
    Erfahre, wie du Komponenten in MDX verwendest
  </Card>
</Columns>