Tag HTML <details>

Definition and Usage

<details> tags define other detailed information that users can open and close as needed.

<details> tags are usually used to create interactive widgets that users can open and close. By default, the widget is closed. When opened, it expands and displays its content.

Any type of content can be placed in <details> in the tag.

Tip:<summary> tag with <details> Combined, you can specify a visible title for the details. When the user clicks the title, it will display <details> Define the content.

See also:

HTML DOM Reference Manual:Details Object

Instance

Example 1

Define detailed information that users can open and close as needed:

<details>
  <summary>Future World Center (Epcot Center)</summary>
  <p>Epcot è un parco tematico del Walt Disney World Resort, con attrazioni emozionanti, padiglioni internazionali, fuochi d'artificio premiati e attività stagionali.</p>
</details>

Prova da solo

Example 2

Use CSS to set the styles of <details> and <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>Future World Center (Epcot Center)</summary>
  <p>Epcot è un parco tematico del Walt Disney World Resort, con attrazioni emozionanti, padiglioni internazionali, fuochi d'artificio premiati e attività stagionali.</p>
</details>
</body>
</html>

Prova da solo

Proprietà

Proprietà Valore Descrizione
open open Specificare che i dettagli devono essere visibili all'utente (aperti).

Proprietà globali

<details> Il tag supporta anche Proprietà globali in HTML.

Proprietà degli eventi

<details> Il tag supporta anche Proprietà degli eventi in HTML.

Impostazioni CSS predefinite

La maggior parte dei browser utilizzerà i seguenti valori predefiniti per la visualizzazione <details> Elemento:

details {
  display: block;
}

Supporto del browser

I numeri nella tabella indicano la versione del browser che supporta il primo elemento.

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