---
title: Accordion
description: Einklappbare Inhaltsbereiche, in denen Nutzer nur den benötigten Inhalt ausklappen – ideal für FAQs, Feature-Listen und Konfigurationsoptionen.
---

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

Einklappbare Bereiche – Leser sehen die Überschrift und klappen Details aus. Unterstützt Icons, Beschreibungen und Gruppierung.

Verwenden Sie Accordions für:
- **FAQs** – Nutzer überfliegen Fragen und klappen Antworten aus
- **Feature-Listen** – Jedes Feature erhält einen Bereich mit Details
- **Konfigurationsoptionen** – Einstellungen nach Kategorie gruppieren
- **Schritt-für-Schritt-Anleitungen** mit ausklappbaren Details

## Verwendung

```mdx
<Accordion title="Advanced Configuration">
  Optional details go here.
</Accordion>
```

## Einfaches Accordion

<Accordion title="Zum Ausklappen klicken">
  Dieser Inhalt bleibt verborgen, bis das Accordion ausgeklappt wird.

  Sie können hier beliebige Inhalte einfügen: Text, Code, Bilder oder andere Komponenten.
</Accordion>

```mdx
<Accordion title="Click to expand">
  This content is hidden until the accordion is expanded.

  You can include any content here: text, code, images, or other components.
</Accordion>
```

## Mit Beschreibung

Fügen Sie mit der Eigenschaft `description` einen Untertitel hinzu:

<Accordion title="API-Referenz" description="Authentifizierungs-Endpoints">
  Hier finden Sie die Dokumentation für Authentifizierungs-Endpoints der API.
</Accordion>

```mdx
<Accordion title="API Reference" description="Authentication endpoints">
  Documentation for authentication API endpoints goes here.
</Accordion>
```

## Standardmäßig geöffnet

Starten Sie das Accordion ausgeklappt mit `defaultOpen`:

<Accordion title="Bereits ausgeklappt" defaultOpen>
  Dieses Accordion startet im geöffneten Zustand.
</Accordion>

```mdx
<Accordion title="Already Expanded" defaultOpen>
  This accordion starts in the open state.
</Accordion>
```

## Mit Icon

<Accordion title="Einstellungen" icon="gear">
  Konfigurationsoptionen und Einstellungen.
</Accordion>

```mdx
<Accordion title="Settings" icon="gear">
  Configuration options and settings.
</Accordion>
```

## Accordion oder Expandable

| Funktion | Accordion | Expandable |
|---------|-----------|------------|
| Icons | Ja | Nein |
| Beschreibungen | Ja (Untertitel) | Nein |
| Gruppierung | AccordionGroup | Eigenständig |
| Visuelles Gewicht | Schwerer, bereichsähnlich | Leichter, inline |
| Am besten geeignet für | FAQs, Feature-Listen | Ergänzende Inhalte |

**Faustregel:** Verwenden Sie Accordion, wenn Bereiche gleich wichtig sind und Nutzer zwischen ihnen wählen. Verwenden Sie Expandable für optionale Details, die keine visuelle Hervorhebung benötigen.

## Eigenschaften

<ParamField name="title" type="string" required>
  Text der Accordion-Kopfzeile.
</ParamField>

<ParamField name="description" type="string">
  Unter dem Titel angezeigter Untertitel.
</ParamField>

<ParamField name="icon" type="string">
  Name des Font Awesome-Icons (z. B. "gear", "settings").
</ParamField>

<ParamField name="iconType" type="string" default="light">
  Stilvariante des Icons: light, regular oder solid.
</ParamField>

<ParamField name="defaultOpen" type="boolean" default="false">
  Im ausgeklappten Zustand starten.
</ParamField>

## 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">
    Erfahren Sie, wie Sie Komponenten in MDX verwenden
  </Card>
</Columns>