<details>: Das Details-Element zur Offenlegung

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;
}

Ein <details>-Widget kann in einem von zwei Zuständen sein. Der standardmäßige geschlossene Zustand zeigt nur das Dreieck und die Bezeichnung innerhalb <summary> an (oder eine vom User-Agent definierte Standardzeichenfolge, wenn kein <summary> vorhanden ist).

Wenn der Benutzer auf das Widget klickt oder den Fokus darauf legt und dann die Leertaste drückt, „dreht“ es sich auf und zeigt seinen Inhalt. Die übliche Verwendung eines sich drehenden Dreiecks, um das Öffnen oder Schließen des Widgets darzustellen, ist der Grund, warum diese manchmal „Twisty“ genannt werden.

Sie können CSS verwenden, um das Offenlegungs-Widget zu gestalten, und Sie können das Widget programmatisch öffnen und schließen, indem Sie das open-Attribut setzen/entfernen. Leider gibt es derzeit keine eingebaute Möglichkeit, die Animation zwischen offen und geschlossen zu animieren.

Standardmäßig, wenn es geschlossen ist, ist das Widget nur hoch genug, um das Offenlegungsdreieck und die Zusammenfassung anzuzeigen. Wenn es geöffnet ist, erweitert es sich, um die darin enthaltenen Details anzuzeigen.

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

Attribute

Dieses Element enthält die globalen Attribute.

open

Dieses Boolean-Attribut zeigt an, ob die Details - das heißt, die Inhalte des <details>-Elements - aktuell sichtbar sind. Die Details werden angezeigt, wenn dieses Attribut existiert, oder versteckt, wenn dieses Attribut fehlt. Standardmäßig fehlt dieses Attribut, was bedeutet, dass die Details nicht sichtbar sind.

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

name

Dieses Attribut ermöglicht es, mehrere <details>-Elemente zu verbinden, wobei jeweils nur eines geöffnet sein kann. Dies ermöglicht es Entwicklern, UI-Funktionen wie Akkordeons ohne Skripting einfach zu erstellen.

Das name-Attribut spezifiziert einen Gruppennamen – 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 verursacht das Schließen eines anderen. Wenn mehreren gruppierten <details>-Elementen das open-Attribut gegeben wird, wird nur das erste in der Quellreihenfolge geöffnet dargestellt.

Hinweis: <details>-Elemente müssen nicht benachbart im Quelltext sein, um zur gleichen Gruppe zu gehören.

Ereignisse

Zusätzlich zu den üblichen von HTML-Elementen unterstützten Ereignissen unterstützt das <details>-Element das toggle-Ereignis, das an das <details>-Element gesendet wird, wann immer sich sein Zustand zwischen offen und geschlossen ändert. Es wird nach der Zustandsänderung gesendet, obwohl, wenn sich der Zustand mehrmals ä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 seinen Zustand ändert:

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

Beispiele

Ein grundlegendes Offenlegungsbeispiel

Dieses Beispiel zeigt ein grundlegendes <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

Einen geöffneten Offenlegungskasten erstellen

Um die <details>-Box von Anfang an im offenen Zustand zu starten, fügen Sie das Boolean-open-Attribut 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 Offenlegungskästen

Wir fügen mehrere <details>-Boxen ein, alle mit demselben Namen, sodass jeweils nur eine 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 Offenlegungs-Widgets zu öffnen. Wenn Sie eines öffnen, schließen sich automatisch alle anderen.

Anpassung des Erscheinungsbildes

Nun wenden wir etwas CSS an, um das Erscheinungsbild des Offenlegungskastens anzupassen.

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 einen Look ähnlich einer Registerkartenoberfläche, bei der durch Klicken auf die Registerkarte deren Inhalte angezeigt werden.

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

Siehe die <summary>-Seite für ein Beispiel zur Anpassung des Offenlegungs-Widgets.

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <summary>
• ::details-content