<summary>: the "Disclosure Summary" element

The HTML <summary> element specifies a summary, caption, or legend for the disclosure window of a <details> element. Clicking the <summary> element toggles the open and closed state of the parent <details> element.

Usage notes

The content of the <summary> element can be any header, plain text, or HTML content that can be used within a paragraph.

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

Default label text

If the first child of a <details> element is not a <summary> element, the interpreter will use a default string (typically "Details") as the label for the disclosure window.

Default style

According to the HTML specification, the default style for <summary> elements includes display: list-item. This allows you to change or remove the icon that appears as a 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.

For Webkit-based browsers, such as Safari, you can control the display of icons via the non-standard CSS pseudo-element ::-webkit-details-marker. To remove the disclosure triangle, use summary::-webkit-details-marker { display: none }.

Examples

Below are some examples of using the <summary> element. You can find more examples in the documentation for the <details> element.

Basic example

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

<details open>
  <summary>Panoramica</summary>
  <ol>
    <li>Contanti in cassa: $ 500,00</li>
    <li>Fattura attuale: $ 75,00</li>
    <li>Data di scadenza: 06/06/2022</li>  
  </ol>
</details>