Naar de inhoud
Gratis naslagwerk over HTML
HTML leren en naslaan
Naslag / Semantiek en indeling

Het element <details>

Het <details>-element van HTML creëert een uitklap-widget waarin informatie alleen zichtbaar is wanneer de widget wordt omgeschakeld naar een open toestand. Er moet een samenvatting of label worden opgegeven met behulp van het <summary>-element.

Auteur: Maarten Soetens

Code 
<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>
Resultaat in de browser

Attributen

Dit element bevat de globale attributen.

open

Dit Booleaanse attribuut geeft aan of de details — dat wil zeggen, de inhoud van het <details>-element — momenteel zichtbaar zijn. De details worden getoond wanneer dit attribuut aanwezig is, of verborgen wanneer dit attribuut afwezig is. Standaard is dit attribuut afwezig, wat betekent dat de details niet zichtbaar zijn.

Opmerking

Je moet dit attribuut volledig verwijderen om de details te verbergen. open="false" maakt de details zichtbaar, omdat dit attribuut Booleaans is.

name

Dit attribuut maakt het mogelijk om meerdere <details>-elementen met elkaar te verbinden, waarbij er slechts één tegelijk open is. Hierdoor kunnen ontwikkelaars eenvoudig UI-functies zoals accordeons maken zonder scripting.

Het name-attribuut geeft een groepsnaam op — geef meerdere <details>-elementen dezelfde name-waarde om ze te groeperen. Slechts één van de gegroepeerde <details>-elementen kan tegelijk open zijn — het openen van één ervan zorgt ervoor dat een ander sluit. Als aan meerdere gegroepeerde <details>-elementen het open-attribuut is gegeven, wordt alleen het eerste element in de brontekstvolgorde geopend weergegeven.

Opmerking

<details>-elementen hoeven niet naast elkaar in de bron te staan om deel uit te maken van dezelfde groep.

Gebeurtenissen

Naast de gebruikelijke gebeurtenissen die door HTML-elementen worden ondersteund, ondersteunt het <details>-element de gebeurtenis toggle, die naar het <details>-element wordt verzonden telkens wanneer zijn toestand verandert tussen open en gesloten. Deze wordt na de statuswijziging verzonden, hoewel, als de toestand meerdere keren verandert voordat de browser de gebeurtenis kan verzenden, de gebeurtenissen worden samengevoegd zodat er slechts één wordt verzonden.

Je kunt een event listener voor de toggle-gebeurtenis gebruiken om te detecteren wanneer de widget van toestand verandert:

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

Voorbeelden

Een basaal uitklapvoorbeeld

Dit voorbeeld toont een eenvoudig <details>-element met een <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>

Resultaat

Resultaat in de browser

Een geopend uitklapvak maken

Om het <details>-vak in geopende toestand te laten starten, voeg je het Booleaanse open-attribuut toe:

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>

Resultaat

Resultaat in de browser

Meerdere benoemde uitklapvakken

We voegen meerdere <details>-vakken toe, allemaal met dezelfde naam, zodat er slechts één tegelijk open kan zijn:

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

Resultaat

Resultaat in de browser

Probeer alle uitklap-widgets te openen. Wanneer je er één opent, sluiten alle andere automatisch.

Het uiterlijk aanpassen

Laten we nu wat CSS toepassen om het uiterlijk van het uitklapvak aan te passen.

CSS

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

Deze CSS creëert een uiterlijk dat lijkt op een interface met tabbladen, waarbij het klikken op het tabblad het opent om de inhoud ervan te tonen.

Opmerking

In browsers die de :open-pseudoklasse niet ondersteunen, kun je de attribuutselector details[open] gebruiken om het <details>-element te stylen wanneer het zich in de geopende toestand bevindt.

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>

Resultaat

Resultaat in de browser

Zie de pagina van <summary> voor een voorbeeld van het aanpassen van de uitklap-widget.

Technische samenvatting

Inhoudscategorieën Flow content, sectioning root, interactive content, palpable content.
Toegestane inhoud Eén <summary>-element, gevolgd door flow content.
Tag weglaten Geen, zowel de begin- als de eindtag zijn verplicht.
Toegestane ouders Elk element dat flow content accepteert.
Impliciete ARIA-rol group
Toegestane ARIA-rollen Geen role toegestaan
DOM-interface HTMLDetailsElement

Zie ook

Verwante elementen

<address> <article> <aside> <dialog> <div> <footer> <header> <hgroup>