<summary>: Элемент сводки раскрытия информации

Элемент <summary> HTML задаёт сводку, заголовок или легенду для раскрывающегося поля элемента <details>. Нажатие на элемент <summary> переключает состояние родительского элемента <details> на открытое и закрытое.

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

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

Элемент <summary> может только использоваться в качестве первого дочернего элемента элемента <details>. При нажатии пользователем на сводку родительский элемент <details> переключается в открытое или закрытое состояние, и затем событие toggle отправляется элементу <details>, которое позволяет отслеживать это изменение состояния.

Содержимое элемента <details> обеспечивает доступное описание для элемента <summary>.

Если первый дочерний элемент элемента <details> не является элементом <summary>, пользовательский агент будет использовать строку по умолчанию (обычно "Подробности") в качестве метки для раскрывающегося поля.

Согласно спецификации HTML, стиль по умолчанию для элементов <summary> включает display: list-item. Это позволяет изменить или убрать отображаемый значок раскрывающегося виджета рядом с меткой, отличным от стандартного, который обычно представляет собой треугольник.

Также можно изменить стиль на display: block для удаления раскрывающегося треугольника.

Подробности см. в разделе Совместимость с браузерами, так как не все браузеры пока поддерживают полную функциональность этого элемента.

В браузерах на основе Webkit, таких как Safari, можно управлять отображением значка с помощью нестандартного псевдоэлемента CSS ::-webkit-details-marker. Для удаления раскрывающегося треугольника используйте summary::-webkit-details-marker { display: none }.

Ниже приведены несколько примеров использования элемента <summary>. Дополнительные примеры можно найти в документации для элемента <details>.

Простой пример использования элемента <summary> в элементе <details>:

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

Результат

Вы можете использовать элементы заголовка в <summary>, например:

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

Результат

В настоящее время имеются проблемы с отступами, которые можно решить с помощью CSS.

В этом примере к элементу <summary> добавляются некоторые семантические данные, чтобы указать метку как важную:

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

Результат

• <details>