HTML <details> Tag

Definition and Usage

<details> tag specifies other detailed information that users can open and close as needed.

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

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 is a theme park at Walt Disney World Resort, featuring exciting attractions, international pavilions, award-winning fireworks, and seasonal events.</p>
</details>

Try It Yourself

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 is a theme park at Walt Disney World Resort, featuring exciting attractions, international pavilions, award-winning fireworks, and seasonal events.</p>
</details>
</body>
</html>

Try It Yourself

Attribute

Attribute Value Description
open open Specifies that the details should be visible to the user (open).

Global Attributes

<details> The tag also supports Global Attributes in HTML.

Event Attributes

<details> The tag also supports Event Attributes in HTML.

Default CSS Settings

Most browsers will display the following default values <details> Element:

details {
  display: block;
}

Browser Support

The numbers in the table indicate the first browser version to fully support the element.

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