HTML-Element <details> zur Anzeige zusätzlicher Informationen

Probieren Sie es aus

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>

details {
  border: 1px solid #aaaaaa;
  border-radius: 4px;
  padding: 0.5em 0.5em 0;
}

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaaaaa;
  margin-bottom: 0.5em;
}

Attribute

Dieses Element unterstützt die globalen Attribute.

open

Dieses boolesche Attribut gibt an, ob die Details – also der Inhalt des Elements <details> – derzeit sichtbar sind. Ist das Attribut vorhanden, werden die Details angezeigt; andernfalls sind sie verborgen. Standardmäßig ist das Attribut nicht vorhanden und die Details sind nicht sichtbar.

Hinweis: Sie müssen dieses Attribut vollständig entfernen, um die Details auszublenden. open="false" macht die Details sichtbar, da es sich um ein boolesches Attribut handelt.

name

Mit diesem Attribut können mehrere <details>-Elemente zu einer Gruppe verbunden werden, in der jeweils nur eines geöffnet sein kann. So lassen sich UI-Funktionen wie Akkordeons einfach und ohne Skripte erstellen.

Das Attribut name legt einen Gruppennamen fest. Weisen Sie mehreren <details>-Elementen denselben name-Wert zu, um sie zu gruppieren. Von den gruppierten <details>-Elementen kann jeweils nur eines geöffnet sein: Wird eines geöffnet, schließt sich das zuvor geöffnete. Wenn mehrere gruppierte <details>-Elemente das Attribut open haben, wird nur das erste in der Reihenfolge des Quelltexts geöffnet dargestellt.

Hinweis: <details>-Elemente müssen im Quelltext nicht unmittelbar aufeinanderfolgen, um derselben Gruppe anzugehören.

Verwendungshinweise

Ein <details>-Steuerelement kann zwei Zustände annehmen. Im standardmäßigen geschlossenen Zustand werden nur das Dreieck und die Beschriftung innerhalb von <summary> angezeigt. Fehlt <summary>, wird stattdessen eine vom User Agent festgelegte Standardbeschriftung angezeigt.

Wenn Benutzer auf das Steuerelement klicken oder es fokussieren und dann die Leertaste drücken, klappt es auf und zeigt seinen Inhalt. Da häufig ein sich drehendes Dreieck das Öffnen und Schließen darstellt, werden solche Steuerelemente manchmal „Twisties“ genannt.

Sie können das Steuerelement auch programmatisch öffnen und schließen, indem Sie sein Attribut open setzen oder entfernen.

Gestaltung des <details>-Elements

Das <details>-Element lässt sich als Container für zwei Elemente betrachten: das <summary>-Element, das sowohl im geöffneten als auch im geschlossenen Zustand sichtbar ist, und das Pseudoelement ::details-content, dessen Inhalt im geschlossenen Zustand verborgen ist.

Das <summary>-Element erhält automatisch den display-Wert list-item. Seine Markierung lässt sich wie eine Listenmarkierung gestalten, etwa mit list-style-type, list-style-position oder ::marker. Siehe auch Das Symbol der Zusammenfassung ändern.

Mit dem Pseudoelement ::details-content können Sie den Übergang zwischen geöffnetem und geschlossenem Zustand animieren. Ein Beispiel finden Sie auf der Referenzseite zu ::details-content.

Ereignisse

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

Mit einem Event-Listener für das Ereignis toggle können Sie erkennen, wann das Steuerelement seinen Zustand ändert:

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

Beispiele

Einfaches Beispiel für ein aufklappbares Steuerelement

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

<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

Standardmäßig geöffnetes Steuerelement erstellen

Damit das <details>-Element anfangs geöffnet ist, fügen Sie das boolesche Attribut open hinzu:

<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 Steuerelemente

Dieses Beispiel enthält mehrere <details>-Elemente mit demselben Namen, sodass jeweils nur eines geöffnet sein kann:

<details name="requirements">
  <summary>Graduation Requirements</summary>
  <p>
    Requires 40 credits, including a passing grade in health, geography,
    history, economics, and wood shop.
  </p>
</details>
<details name="requirements">
  <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="requirements">
  <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 Steuerelemente zu öffnen. Wenn Sie eines öffnen, schließen sich alle anderen automatisch.

Erscheinungsbild anpassen

Dieses Beispiel verwendet CSS, um das Erscheinungsbild des aufklappbaren Steuerelements anzupassen.

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>

CSS

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

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

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

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

Dieses CSS erzeugt ein Erscheinungsbild ähnlich einer Oberfläche mit Registerkarten: Ein Klick auf die Registerkarte öffnet sie und zeigt ihren Inhalt.

Ergebnis

Auf der Seite zu <summary> finden Sie ein Beispiel zur Anpassung des aufklappbaren Steuerelements.

Technische Übersicht

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <summary>
• ::details-content