# Details

Ein geschlossener Abschnitt, den die Person öffnet, wenn sie will: Erklärungen und Einstellungen, die die meisten Menschen nicht benötigen.

## Playground

```html
<details class="feitio-details"><summary><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-chevron-right"></use></svg>Was ist die Zeitzone?</summary><div class="content"><p>Es ist die Ortszeit, mit der das Produkt Erinnerungen auslöst.</p></div></details>
```

## Wann verwenden

-   Für Hilfe benötigen nur einige ("Welche Zeitzone?").
-   Für fortgeschrittene Einstellungen ändert fast niemand etwas.

## Wann nicht verwenden

-   **Was alle lesen müssen:** lassen Sie es offen.
-   **Erforderliches Feld ausblenden.**
-   **Mehrere hintereinander als Akkordion:** wenn alles geschlossen ist, wird nichts gelesen.

## Beispiele

### Eine Frage

Der Inhalt wächst und der Pfeil dreht sich auf der Änderungskurve.

Code anzeigen

```html
<details class="feitio-details">
  <summary><svg class="feitio-icon" aria-hidden="true">…</svg>O que é o fuso horário?</summary>
  <div class="content"><p>…</p></div>
</details>
```

## Anatomie

1.  **Pfeil:** dreht sich nach unten, wenn er geöffnet wird.
2.  **Zusammenfassung:** eine Frage oder ein Name, unterstrichen wie ein Link.
3.  **Inhalt:** mit dem Zusammenfassungstext ausgerichtet.

## Schreiben

-   Die Zusammenfassung sagt, was drin ist. Niemals "Mehr erfahren".

## Barrierefreiheit

-   Es ist der Browsers `<details>`: es öffnet sich mit der Tastatur und Screenreader sagen, ob es offen ist.

## Attribute

Attribut

Werte

Zum Zweck

`class="feitio-details"`

am `<details>`

Der drehende Pfeil und die unterstrichene Zusammenfassung.

`class="content"`

um den Inhalt

Gleichgerichtet mit der Zusammenfassung.

`open`

optional

Fängt offen an.