Tag <details> HTML

Definition and Usage

<details> tags define additional 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 to park tematyczny w Disney World Resort, który oferuje ekscytujące atrakcje, międzynarodowe pawilony, nagradzane pokazy fajerwerków oraz sezonowe wydarzenia.</p>
</details>

Spróbuj sam

Example 2

Using 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 to park tematyczny w Disney World Resort, który oferuje ekscytujące atrakcje, międzynarodowe pawilony, nagradzane pokazy fajerwerków oraz sezonowe wydarzenia.</p>
</details>
</body>
</html>

Spróbuj sam

Atrybut

Atrybut Wartość Opis
open open Określa, czy szczegóły powinny być widoczne dla użytkownika (otwarte).

Globalne atrybuty

<details> Tagi te wspierają również Globalne atrybuty HTML.

Atrybuty wydarzeń

<details> Tagi te wspierają również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek używa następujących wartości domyślnych do wyświetlania <details> Element:

details {
  display: block;
}

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten element.

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