<summary>: The Disclosure Summary element

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

* Some parts of this feature may have varying levels of support.

The HTML Disclosure Summary element (<summary>) 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.

Интерактивный пример

<details>
  <summary>
    I have keys but no doors. I have space but no room. You can enter but can’t
    leave. What am I?
  </summary>
  A keyboard.
</details>

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

Permitted content	Phrasing content or one element of Heading content
Tag omission	None, both the start tag and the end tag are mandatory.
Permitted parents	The `<details>` element.
Permitted ARIA roles	`button`
DOM interface	`HTMLElement`

Атрибуты

Этот элемент включает только глобальные атрибуты.

Примечания

Содержимым элемента <summary> может быть любой заголовок, простой текст или HTML, которые можно использовать в абзаце.

Элемент <summary> может быть использован в качестве потомка элемента <details> . Когда пользователь кликает по элементу summary, его родитель - <details> меняет состояние с раскрытого или закрытого на обратное,и тогда toggle event is sent to the <details> element, which can be used to let you know when this state change occurs.

Default label text

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

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.

Примеры

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

Простой пример

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

html

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

Summaries as headings

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

html

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

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

HTML in summaries

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

html

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

Спецификации

Specification
HTML # the-summary-element

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

<details>