<details>: The Details disclosure element #

::: section-content The <details> HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the <summary> element.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <summary> element are used as the label for the disclosure widget. :::

Try it #

::: section-content ::: iframe ::: {.output-header .border-rounded-top}

HTML Demo: <details> #

Reset :::

::: {#warning-no-script .warning-container} ::: warning The interactive example cannot be shown because JavaScript is disabled. ::: :::

::: {#warning-mathml-not-supported .warning-container .hidden} ::: warning The interactive example cannot be shown because MathML is not supported by your browser. ::: :::

::: {#editor-container .editor-container .tabbed-shorter .hidden .border-rounded-bottom editor-type=“tabbed”} ::: {#tab-container .section .tabs} ::: {#tablist .tab-list role=“tablist”} HTML

CSS

JavaScript :::

::: {#html-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“html” aria-hidden=“true”} ::: {#html-editor}

Details

Something small enough to escape casual notice.

::: :::

::: {#css-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“css” aria-hidden=“true”} ::: {#css-editor} details { border: 1px solid #aaa; border-radius: 4px; padding: 0.5em 0.5em 0; }

summary {
  font-weight: bold;
  margin: -0.5em -0.5em 0;
  padding: 0.5em;
}

details[open] {
  padding: 0.5em;
}

details[open] summary {
  border-bottom: 1px solid #aaa;
  margin-bottom: 0.5em;
}

::: :::

::: {#js-panel .section .hidden tabindex=“0” role=“tabpanel” aria-labelledby=“js” aria-hidden=“true”} ::: {#js-editor} ::: ::: :::

::: {#output .output-container}

Output #

::: :::

::: {.section .console-container .hidden aria-hidden=“true”}

Console Output #

![] clear console

::: {#console .console} ::: :::

::: {#html-output .output .editor-tabbed} %html-content% ::: :::

A <details> widget can be in one of two states. The default closed state displays only the triangle and the label inside <summary> (or a user agent-defined default string if no <summary>).

When the user clicks on the widget or focuses it then presses the space bar, it "twists" open, revealing its contents. The common use of a triangle which rotates or twists around to represent opening or closing the widget is why these are sometimes called "twisty".

You can use CSS to style the disclosure widget, and you can programmatically open and close the widget by setting/removing its open attribute. Unfortunately, at this time, there's no built-in way to animate the transition between open and closed.

By default when closed, the widget is only tall enough to display the disclosure triangle and summary. When open, it expands to display the details contained within.

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. :::

Attributes #

::: section-content This element includes the global attributes.

open

This Boolean attribute indicates whether the details — that is, the contents of the <details> element — are currently visible. The details are shown when this attribute exists, or hidden when this attribute is absent. By default this attribute is absent which means the details are not visible.

::: {#sect1 .notecard .note} Note: You have to remove this attribute entirely to make the details hidden. open="false" makes the details visible because this attribute is Boolean. ::: :::

Events #

::: section-content In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed. It is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.

You can use an event listener for the toggle event to detect when the widget changes state:

::: code-example [js]{.language-name}

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

::: :::

Examples #

A simple disclosure example #

::: section-content This example shows a simple <details> element with a <summary>.

::: code-example [html]{.language-name}

<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 #

::: {#sect2 .code-example} ::: iframe ::: ::: :::

Creating an open disclosure box #

::: section-content To start the <details> box in its open state, add the Boolean open attribute:

::: code-example [html]{.language-name}

<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>

:::

Result #

::: {#sect3 .code-example} ::: iframe ::: ::: :::

Customizing the appearance #

::: section-content Now let's apply some CSS to customize the appearance of the disclosure box.

CSS #

::: code-example [css]{.language-name}

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

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

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

details[open] > summary {
  background-color: #ccf;
}

:::

This CSS creates a look similar to a tabbed interface, where clicking the tab opens it to reveal its contents.

The selector details[open] can be used to style the element which is open.

HTML #

::: code-example [html]{.language-name}

<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 #

::: {#sect4 .code-example} ::: iframe ::: ::: :::

Customizing the disclosure widget #

::: section-content The disclosure triangle itself can be customized, although this is not as broadly supported. There are variations in how browsers support this customization due to experimental implementations as the element was standardized, so we'll have to use multiple approaches for a while.

The <summary> element supports the list-style shorthand property and its longhand properties, such as list-style-type, to change the disclosure triangle to whatever you choose (usually with list-style-image). For example, we can remove the disclosure widget icon by setting list-style: none.

CSS #

::: code-example [css]{.language-name}

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

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
  list-style: 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 tabbed interface, where activating the tab expands and opens it to reveal its contents.

HTML #

::: code-example [html]{.language-name}

<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 #

::: {#sect5 .code-example} ::: iframe ::: ::: :::

Technical summary #

::: section-content

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.
Implicit ARIA role	`group`
Permitted ARIA roles	No `role` permitted
DOM interface	`HTMLDetailsElement`

:::

Specifications #

::: _table #

Specification #

HTML Standard
[# the-details-element]{.small}

:::

Browser compatibility #

::: _table #

          Desktop                                                    Mobile

          Chrome    Edge   Firefox       Internet   Opera   Safari   WebView   Chrome    Firefox for   Opera     Safari   Samsung
                                         Explorer                    Android   Android   Android       Android   on IOS   Internet

details 12 79 49 No 15 6 4.4 18 49 14 6 1.0

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

name 120 120 No No No No No No No No No No

`open` 12 79 49 No 15 6 4.4 18 49 14 6 1.0 #

:::

<details>: The Details disclosure element #

Try it #

HTML Demo: <details> #

Output #

Console Output #

Attributes #

Events #

Examples #

A simple disclosure example #

Result #

Creating an open disclosure box #

Result #

Customizing the appearance #

CSS #

HTML #

Result #

Customizing the disclosure widget #

CSS #

HTML #

Result #

Technical summary #

Specifications #

::: _table #

Specification #

Browser compatibility #

::: _table #

open 12 79 49 No 15 6 4.4 18 49 14 6 1.0 #

See also #

`open` 12 79 49 No 15 6 4.4 18 49 14 6 1.0 #