HTML <details> tag

Definition og brug

<details> tagget definerer andre detaljer, som brugeren kan åbne og lukke efter behov.

<details> tagget bruges normalt til at oprette interaktive komponenter, som brugeren kan åbne og lukke. Som standard er komponenten lukket. Når den åbnes, udvider den sig og viser indholdet.

Enhver type indhold kan placeres i <details> i tagget.

Tip:<summary>-tagget med <details> Brug sammen, kan du specificere en synlig titel for detaljerne. Når brugeren klikker på titlen, vises <details> Defineret indhold.

Se også:

HTML DOM referencehåndbog:Details-objekt

Eksempel

Eksempel 1

Definer detaljer, som brugeren kan åbne og lukke efter behov:

<details>
  <summary>Fremtidens verdenscenter (Epcot Center)</summary>
  <p>Epcot er en temapark i Walt Disney World Resort, med spændende attraktioner, internationale pavilloner, prisvindende fyrverkerier og sæsonbaserede aktiviteter.</p>
</details>

Prøv det selv

Eksempel 2

Brug CSS til at sætte stil på <details> og <summary>:

<html>
<style>
details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}
details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}
</style>
<body>
<details>
  <summary>Fremtidens verdenscenter (Epcot Center)</summary>
  <p>Epcot er en temapark i Walt Disney World Resort, med spændende attraktioner, internationale pavilloner, prisvindende fyrverkerier og sæsonbaserede aktiviteter.</p>
</details>
</body>
</html>

Prøv det selv

Egenskab

Egenskab Værdi Beskrivelse
open open Definerer, at detaljerne skal være synlige for brugeren (åbnet).

Globale egenskaber

<details> Tagget understøtter også Globale egenskaber i HTML.

event egenskaber

<details> Tagget understøtter også Event egenskaber i HTML.

Standard CSS indstillinger

De fleste browsere vil bruge følgende standardværdier til visning <details> Element:

details {
  display: block;
}

Browser support

Tallene i tabellen angiver den første browserversion, der fuldt ud understøtter elementet.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
12.0 79.0 49.0 6.0 15.0