我們的志工尚未將本文翻譯為 正體中文 (繁體) 版本。加入我們,幫忙翻譯!
您也可以閱讀本文的 English (US) 版本。

The HTML <details> element is used as a disclosure widget from which the user can retrieve additional information.

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 the details will be shown to the user on page load. Default is false and so details will be hidden.

Example

<details>
  <summary>Some details</summary>
  <p>More info about the details.</p>
</details>

<details open>
  <summary>Even more details</summary>
  <p>Here are even more details about the details.</p>
</details>

Result

Note: If the live sample above doesn't work for you, see Browser compatibility to determine if your browser supports the feature at all.

Example with styling

Following the more recent spec, Firefox makes the summary element display: list-item and the marker can be styled the same way list items can be styled. Following an older spec, Chrome and Safari have a custom ::-webkit-details-marker pseudo element which can be styled.

For cross browser compatible styling hide Firefox's marker by setting summary { display: block } and Chrome and Safari's marker by setting ::-webkit-details-marker {display: none;}. Styling can then be applied in a way appropriate to the necessary styles. The example below uses CSS generated content to add the marker back.

HTML

<details>
  <summary>Some details</summary> 
  <p>More info about the details.</p> 
</details>

CSS

summary {
  display: block;
}

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

summary::before {
  content: '\25B6';
  padding-right: 0.5em;
}

details[open] > summary::before {
  content: '\25BC';
}

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