码农教程 - 一技在手,衣食无忧! tools

HTML <details> Tag

❮ Previous Complete HTML Reference Next ❯

Example

Specify details that the user can open and close on demand:

<details>
  <summary>Epcot Center</summary>
  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>
Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The <details> tag specifies additional details that the user can open and close on demand.

The <details> tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within.

Any sort of content can be put inside the <details> tag. 

Tip: The <summary> tag is used in conjunction with <details> to specify a visible heading for the details.

Browser Support

The numbers in the table specify the first browser version that fully supports the element.

Element
<details> 12.0 79.0 49.0 6.0 15.0

Attributes

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

Global Attributes

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

Event Attributes

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

More Examples

Example

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

</body>
</html>
Try it Yourself »

Related Pages

HTML DOM reference: Details Object

Default CSS Settings

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

details {
  display: block;
}

❮ Previous Complete HTML Reference Next ❯