<details>: Das Details-Disclosure-Element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

Das <details>-HTML-Element erstellt ein Disclosure-Widget, in dem Informationen nur sichtbar sind, wenn das Widget in den offenen Zustand umgeschaltet wird. Ein Zusammenfassungs- oder Beschriftungselement muss mithilfe des <summary>-Elements bereitgestellt werden.

Ein Disclosure-Widget wird normalerweise auf dem Bildschirm mit einem kleinen Dreieck angezeigt, das sich dreht (oder verdreht), um den offenen/geschlossenen Zustand anzuzeigen, mit einem Etikett neben dem Dreieck. Der Inhalt des <summary>-Elements wird als Beschriftung für das Disclosure-Widget verwendet. Der Inhalt des <details> bietet die zugängliche Beschreibung für das <summary>.

Probieren Sie es aus

Ein <details>-Widget kann in einem von zwei Zuständen sein. Der Standardzustand geschlossen zeigt nur das Dreieck und das Etikett innerhalb von <summary> an (oder eine vom Benutzeragenten definierte Standardzeichenfolge, wenn kein <summary> vorhanden ist).

Wenn der Benutzer auf das Widget klickt oder es fokussiert und dann die Leertaste drückt, „verdreht“ es sich und zeigt seinen Inhalt an. Die übliche Verwendung eines Dreiecks, das sich dreht oder verdreht, um die Öffnung oder Schließung des Widgets darzustellen, ist der Grund, warum diese manchmal als „Twisty“ bezeichnet werden.

Sie können CSS verwenden, um das Disclosure-Widget zu gestalten, und Sie können das Widget programmgesteuert öffnen und schließen, indem Sie das open-Attribut setzen/entfernen. Leider gibt es derzeit keine eingebaute Möglichkeit, den Übergang zwischen offenem und geschlossenem Zustand zu animieren.

Im Standardzustand, wenn geschlossen, ist das Widget nur so hoch, dass es das Dreieck und die Zusammenfassung anzeigt. Wenn es geöffnet ist, erweitert es sich, um die darin enthaltenen Details anzuzeigen.

Vollständig standardkonforme Implementierungen wenden automatisch das CSS display: list-item auf das <summary>-Element an. Sie können dies oder das ::marker-Pseudo-Element verwenden, um das Disclosure-Widget anzupassen.

Attribute

Dieses Element umfasst die globalen Attribute.

open

Dieses Boolean-Attribut gibt an, ob die Details – das heißt, der Inhalt des <details>-Elements – derzeit sichtbar sind. Die Details werden angezeigt, wenn dieses Attribut existiert, oder ausgeblendet, wenn es fehlt. Standardmäßig ist dieses Attribut nicht vorhanden, was bedeutet, dass die Details nicht sichtbar sind.

Hinweis: Sie müssen dieses Attribut vollständig entfernen, um die Details auszublenden. open="false" macht die Details sichtbar, da dieses Attribut Boolean ist.

name

Dieses Attribut ermöglicht die Verbindung mehrerer <details>-Elemente, bei denen jeweils nur eines geöffnet sein kann. Dies ermöglicht es Entwicklern, UI-Funktionen wie Akkordeons ohne Skripterstellung leicht zu erstellen.

Das name-Attribut gibt einen Gruppennamen an — geben Sie mehreren <details>-Elementen denselben name-Wert, um sie zu gruppieren. Nur eines der gruppierten <details>-Elemente kann gleichzeitig geöffnet sein — das Öffnen eines Elements führt dazu, dass ein anderes schließt. Wenn mehreren gruppierten <details>-Elementen das open-Attribut zugewiesen wird, wird nur das erste in der Quellreihenfolge als geöffnet dargestellt.

Hinweis: <details>-Elemente müssen nicht direkt nebeneinander im Quellcode platziert werden, um Teil derselben Gruppe zu sein.

Ereignisse

Zusätzlich zu den üblichen Ereignissen, die von HTML-Elementen unterstützt werden, unterstützt das <details>-Element das toggle-Ereignis, das an das <details>-Element gesendet wird, wenn sein Zustand zwischen geöffnet und geschlossen wechselt. Es wird nach der Zustandsänderung gesendet, obwohl wenn sich der Zustand mehrfach ändert, bevor der Browser das Ereignis senden kann, die Ereignisse zusammengefasst werden, sodass nur eines gesendet wird.

Sie können einen Ereignis-Listener für das toggle-Ereignis verwenden, um zu erkennen, wann das Widget den Zustand wechselt:

js
details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

Beispiele

Ein grundlegendes Disclosure-Beispiel

Dieses Beispiel zeigt ein einfaches <details>-Element mit einem <summary>.

html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Ergebnis

Erstellen einer offenen Disclosure-Box

Um die <details>-Box im geöffneten Zustand zu starten, fügen Sie das Boolean open-Attribut hinzu:

html
<details open>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Ergebnis

Mehrere benannte Disclosure-Boxen

Wir fügen mehrere <details>-Boxen hinzu, die alle denselben Namen haben, sodass jeweils nur eine geöffnet sein kann:

html
<details name="reqs">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="reqs">
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>
<details name="reqs">
  <summary>Job Requirements</summary>
  <p>
    Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance,
    privacy, security, and internationalization, as well as a dislike of
    broccoli.
  </p>
</details>

Ergebnis

Versuchen Sie, alle Disclosure-Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich automatisch alle anderen.

Anpassung des Erscheinungsbildes

Nun wenden wir einige CSS-Stile an, um das Erscheinungsbild der Disclosure-Box anzupassen.

CSS

css
details {
  font:
    16px "Open Sans",
    Calibri,
    sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details:open > summary {
  background-color: #ccf;
}

Dieses CSS erzeugt eine Darstellung, die einer Registerkarten-Oberfläche ähnelt: Wenn Sie auf die Registerkarte klicken, wird sie geöffnet, um ihren Inhalt preiszugeben.

Hinweis: In Browsern, die die :open-Pseudo-Klasse nicht unterstützen, können Sie den Attribut-Selektor details[open] verwenden, um das <details>-Element im offenen Zustand zu stylen.

HTML

html
<details>
  <summary>System Requirements</summary>
  <p>
    Requires a computer running an operating system. The computer must have some
    memory and ideally some kind of long-term storage. An input device as well
    as some form of output device is recommended.
  </p>
</details>

Ergebnis

Sehen Sie sich die Seite <summary> für ein Beispiel zur Anpassung des Disclosure-Widgets an.

Technische Zusammenfassung

Inhaltskategorien Fließinhalt, Abschnittswurzel, interaktiver Inhalt, spürbarer Inhalt.
Erlaubter Inhalt Ein <summary>-Element gefolgt von Fließinhalt.
Tag-Auslassung Keine, sowohl das Start- als auch das Endetags sind obligatorisch.
Erlaubte Eltern Jedes Element, das Fließinhalt akzeptiert.
Implizite ARIA-Rolle group
Erlaubte ARIA-Rollen Keine role erlaubt
DOM-Schnittstelle [`HTMLDetailsElement`](/de/docs/Web/API/HTMLDetailsElement)

Spezifikationen

Specification
HTML
# the-details-element

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch