<summary>: The Disclosure Summary element #

::: section-content The <summary> HTML element specifies a summary, caption, or legend for a <details> element's disclosure box. Clicking the <summary> element toggles the state of the parent <details> element open and closed. :::

Try it #

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

HTML Demo: <summary> #

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}

::: {#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% ::: ::: :::

Attributes #

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

Usage notes #

::: section-content The <summary> element's contents can be any heading content, plain text, or HTML that can be used within a paragraph.

A <summary> element may only be used as the first child of a <details> element. When the user clicks on the summary, the parent <details> element is toggled open or closed, and then a toggle event is sent to the <details> element, which can be used to let you know when this state change occurs. :::

Default label text #

::: section-content If a <details> element's first child is not a <summary> element, the user agent will use a default string (typically "Details") as the label for the disclosure box. :::

Default style #

::: section-content Per the HTML specification, the default style for <summary> elements includes display: list-item. This makes it possible to change or remove the icon displayed as the disclosure widget next to the label from the default, which is typically a triangle.

You can also change the style to display: block to remove the disclosure triangle.

See the Browser compatibility section for details, as not all browsers support full functionality of this element yet.

For Webkit-based browsers, such as Safari, it is possible to control the icon display through the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }. :::

Examples #

::: section-content Below are some examples showing <summary> in use. You can find more examples in the documentation for the <details> element. :::

Basic example #

::: section-content A simple example showing the use of <summary> in a <details> element:

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

<details open>
  <summary>Overview</summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

:::

Result #

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

Summaries as headings #

::: section-content You can use heading elements in <summary>, like this:

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

<details open>
  <summary><h4>Overview</h4></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

:::

Result #

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

This currently has some spacing issues that could be addressed using CSS.

::: {#sect3 .notecard .warning} Warning: Because the <summary> element has a default role of button (which strips all roles from child elements), this example will not work for users of assistive technologies such as screen readers. The <h4> will have its role removed and thus will not be treated as a heading for these users. ::: :::

HTML in summaries #

::: section-content This example adds some semantics to the <summary> element to indicate the label as important:

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

<details open>
  <summary><strong>Overview</strong></summary>
  <ol>
    <li>Cash on hand: $500.00</li>
    <li>Current invoice: $75.30</li>
    <li>Due date: 5/6/19</li>
  </ol>
</details>

:::

Result #

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

Technical summary #

::: section-content

Specifications #

::: _table #

Specification #

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

:::

Browser compatibility #

::: _table Desktop Mobile

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

summary 12 79 49 No 15 6 4 18 49 14 6 1.0 display_list_item 89 89 49 No 75 No 89 89 49 63 No 15.0 :::

See also #

::: section-content

• <details> :::

::: _attribution © 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary{._attribution-link} :::