Our volunteers haven't translated this article into 正體中文 (繁體) yet. Join us and help get the job done!
You can also read the article in English (US).

The HTML Details Element (<details>) is used to create a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle which is rotated (or twisted) to indicate the act of toggling it open and closed, with a label next to the triangle. If the first child of the <details> element is a <summary>, the contents of the <summary> element are used as the label for the disclosure widget.

The common use of a triangle which rotates or twists around to represent the act of opening or closing the widget is why these are sometimes called "twisties."

A <details> widget can be in one of two states. The default state (closed) displays just the label string as specified using <summary> (or a user agent-defined default string) and the triangle widget itself. This might look like the following:

Screenshot of closed <details> widget.

Here we see a standard disclosure widget with the label "System Requirements", in its default closed state. When the user clicks on the widget or its label, it "twists" open, revealing its contents, which looks like this:

Screenshot of open <details> widget.

From there, you can use CSS to dramatically alter the appearance of the disclosure widget, and you can programmatically open and close the widget by setting the value of its open attribute.

When the widget is closed, the element's width and height are only large enough to include the disclosure triangle and summary, by default. When the widget is open, the element expands to provide enough room for the details contained within to be displayed.

Unfortunately, at this time there's no way to animate the transition between open and closed.

Fully standards-compliant implementations automatically apply the CSS  display: list-item to the <summary> element. You can use this to customize its appearance further. See Customizing the disclosure widget for further details.

Content categories Flow content, sectioning root, interactive content, palpable content.
Permitted content One <summary> element followed by flow content.
Tag omission None, both the starting and ending tag are mandatory.
Permitted parents Any element that accepts flow content.
Permitted ARIA roles None
DOM interface HTMLDetailsElement

Attributes

This element includes the global attributes.

open
This Boolean attribute indicates whether or not the details — that is, the contents of the <details> element — are currently visible. The default, false, means the details are not visible.

Events

In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to it whenever its state changes between open and closed, in either direction. It is sent after the state is changed, although if the state is changed more than once before the browser is able to dispatch the event, the events are coalesced so that only one is sent.

You can, then, listen for the toggle event in order to detect when the widget changes state:

detailsElem.addEventListener("toggle", function(evt) {
  if (detailsElem.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
}, false);

Examples

A simple disclosure example

This example simply specifies a <details> element with no summary.

<details>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

In this situation, the browser will use a default summary string (usually "Details"). Here's what your browser does with it:

Providing a summary

This example adds a summary to the above example by using the <summary> element inside the <details> block, like this:

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

The result from this HTML is this:

Creating an open disclosure box

To instantiate the <details> box in its open state, we simply add the Boolean open attribute:

<details open>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

This is all it takes, and results in:

Customizing the appearance

Now let's apply some CSS to customize the appearance of the disclosure box.

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

This CSS creates a look similar to a tab-like interface, where clicking the tab expands and opens it to reveal its contents.

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Result

Customizing the disclosure widget

The disclosure triangle widget itself can be customized as well, although this was standardized more recently and is not as broadly supported. In addition, there are some variations in how this is supported as a result of experimentation that led to the standard being decided upon, so if you need to do this you'll have to use multiple approaches for a while.

The <summary> element supports using the list-style shorthand property as well as its longhand properties (such as list-style-type) to change the disclosure widget from a triangle to whatever you choose.

We can remove the disclosure widget from the previous example by setting list-style to none. You can also set the list-style to other configurations in order to fully customize the appearance of the widget.

Chrome doesn't support this yet, however, so we also need to use its non-standard ::-webkit-details-marker pseudo-element to customize the appearance in that browser.

For even broader compatibility in the short term, you may instead need to set display: none on the <summary> to disable display of the disclosure widget.

CSS

details {
  font: 16px "Open Sans", "Arial", sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  list-style: none;
}

details > summary::-webkit-details-marker {
  display: none;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

This CSS creates a look similar to a tab-like interface, where clicking the tab expands and opens it to reveal its contents.

HTML

<details>
  <summary>System Requirements</summary>
  <p>Requires a computer running an operating system. The computer
  must have some memory and ideally some kind of long-term storage.
  An input device as well as some form of output device is
  recommended.</p>
</details>

Result

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<details>' in that specification.
Living Standard  
HTML 5.1
The definition of '<details>' in that specification.
Recommendation Initial definition

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support12 No1492 No156
open12 No149 No156
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidIE mobileOpera AndroidiOS Safari
Basic support Yes Yes No1493 No ?6.1
open4 Yes No149 No ?6.1

1. In development.

2. Before Firefox 57, there was a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.

3. There is a bug meaning that <details> elements can't be made open by default using the open attribute if they have a CSS animation active on them.

See also