HTML <details> tagg

Definition och användning

<details> taggen definierar andra detaljer som användaren kan öppna och stänga efter behov.

<details> taggen används vanligtvis för att skapa interaktiva komponenter som användaren kan öppna och stänga. Som standard är komponenten stängd. När den öppnas expanderar den och visar sitt innehåll.

Allt slags innehåll kan placeras inuti <details> inuti taggen.

Tips:<summary>-taggen med <details> Används tillsammans, kan en synlig rubrik specificeras för detaljer. När användaren klickar på rubriken visas <details> Definiera innehållet.

Se också:

HTML DOM-handbok:Details-objekt

Exempel

Exempel 1

Definiera detaljer som användaren kan öppna och stänga efter behov:

<details>
  <summary>Framtidens världscenter (Epcot Center)</summary>
  <p>Epcot är en temapark i Walt Disney World Resort, med spännande attraktioner, internationella utställningar, prisbelönta fyrverkerier och säsongsmässiga evenemang.</p>
</details>

Prova själv

Exempel 2

Använd CSS för att ställa in stilen för <details> och <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>Framtidens världscenter (Epcot Center)</summary>
  <p>Epcot är en temapark i Walt Disney World Resort, med spännande attraktioner, internationella utställningar, prisbelönta fyrverkerier och säsongsmässiga evenemang.</p>
</details>
</body>
</html>

Prova själv

Egenskap

Egenskap Värde Beskrivning
open open Definierar att detaljerna bör vara synliga för användaren (öppna).

Globala egenskaper

<details> Etiketterna stöder också Globala egenskaper i HTML.

händelseegenskaper

<details> Etiketterna stöder också Händelseegenskaper i HTML.

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <details> Element:

details {
  display: block;
}

Webbläsarstöd

Numrerna i tabellen anger den första webbläsarens version som fullständigt stöder detta element.

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