Исполняемые доки HTML: Details и summary

Q: Как сделать details открытым по умолчанию?

Добавьте логический атрибут open: . Браузер добавляет и удаляет этот атрибут, когда пользователь переключает блок, поэтому CSS может оформлять details[open].

Q: Как сделать аккордеон, где открыт только один раздел?

Дайте всем в группе одинаковый атрибут name, например name="faq". Открытие одного закрывает остальные в этой группе, без JavaScript.

Q: Как убрать или изменить стрелку у summary?

Задайте summary значение list-style: none и добавьте summary::-webkit-details-marker { display: none; } для Safari. Затем нарисуйте свой индикатор, например через summary::after, и меняйте его через details[open] summary::after.

Q: Можно ли узнать, когда details открывается?

Да. Слушайте событие toggle у элемента и читайте его свойство open. Присваивание details.open = true в JavaScript открывает его.

Раскрывающийся блок через details и summary

Оберните содержимое в <details> и поставьте первым <summary>. Summary остается видимой; все остальное скрыто, пока читатель по ней не кликнет:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>details</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <details>
    <summary>What is included in the free plan?</summary>
    <p>Five projects, community support and all the beginner courses.</p>
  </details>
</body>
</html>

Кликните по вопросу, чтобы открыть его, и еще раз, чтобы закрыть. Браузер добавляет треугольный маркер, делает summary доступной для фокуса, переключает ее по Enter или Space и сообщает программам чтения с экрана, развернута она или свернута. JavaScript здесь не участвует.

Если не указать <summary>, браузер покажет вместо нее подпись по умолчанию («Details» на английском).

Открыт по умолчанию

Логический атрибут open показывает содержимое с самого начала. Браузер добавляет и удаляет open, когда читатель переключает блок, поэтому за него же удобно цепляться в стилях:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>open</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
    details[open] { border-color: #2563eb; }
    summary { cursor: pointer; font-weight: 600; }
  </style>
</head>
<body>
  <details open>
    <summary>Shipping</summary>
    <p>Orders ship within two working days.</p>
  </details>
  <details>
    <summary>Returns</summary>
    <p>Return any item within 30 days.</p>
  </details>
</body>
</html>

У открытого блока синяя рамка от details[open]. Откройте «Returns», и он тоже станет синим; открытыми одновременно могут быть оба.

Аккордеон: открыт только один

Дайте нескольким элементам <details> одинаковый name, и они станут исключающей группой: открытие одного закрывает остальные. Раньше для этого требовался JavaScript, а теперь в современных Chrome, Edge, Firefox и Safari хватает одного атрибута:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Accordion</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .faq { max-width: 420px; border: 1px solid #e5e7eb; border-radius: 10px; }
    .faq details + details { border-top: 1px solid #e5e7eb; }
    .faq summary { padding: 12px 14px; cursor: pointer; font-weight: 600; }
    .faq p { margin: 0; padding: 0 14px 12px; color: #374151; }
  </style>
</head>
<body>
  <div class="faq">
    <details name="faq" open>
      <summary>Is it free?</summary>
      <p>Yes, the basics are free forever.</p>
    </details>
    <details name="faq">
      <summary>Do I need to install anything?</summary>
      <p>No, everything runs in the browser.</p>
    </details>
    <details name="faq">
      <summary>Can I cancel any time?</summary>
      <p>Yes, from your account settings.</p>
    </details>
  </div>
</body>
</html>

Откройте второй вопрос, и первый закроется. Уберите атрибуты name, и они снова будут открываться независимо. Исключающий аккордеон скрывает содержимое, которое читатель может захотеть сравнить, поэтому используйте его, когда разделы это альтернативы, а обычные <details>, когда людям может понадобиться открыть несколько.

Оформление маркера

Треугольник это маркер списка у summary. list-style: none его убирает (правило ::-webkit-details-marker нужно для Safari), а псевдоэлемент может нарисовать собственный индикатор:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom marker</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    details { max-width: 420px; background: #f9fafb; border-radius: 8px; margin-bottom: 8px; }
    summary {
      list-style: none; cursor: pointer;
      display: flex; justify-content: space-between; align-items: center;
      padding: 12px 14px; font-weight: 600;
    }
    summary::-webkit-details-marker { display: none; }
    summary::after {
      content: "+"; font-size: 20px; color: #2563eb;
      transition: transform 0.2s;
    }
    details[open] summary::after { transform: rotate(45deg); }
    summary:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 8px; }
    details p { margin: 0; padding: 0 14px 12px; }
  </style>
</head>
<body>
  <details>
    <summary>How long are the lessons?</summary>
    <p>Most lessons take five to ten minutes.</p>
  </details>
  <details>
    <summary>Do I get a certificate?</summary>
    <p>Yes, when you finish a course.</p>
  </details>
</body>
</html>

Плюс поворачивается на 45 градусов и превращается в крестик, когда раздел открывается. Сохраняйте видимый стиль фокуса, как обводку :focus-visible здесь: когда стандартный маркер убран, пользователи клавиатуры ориентируются по рамке фокуса.

Событие toggle и свойство open

JavaScript может читать и задавать details.open, а событие toggle срабатывает после каждого изменения, чем бы оно ни было вызвано: кликом, клавишей или скриптом:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>toggle</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    button { font: inherit; padding: 4px 10px; margin-inline-end: 6px; }
    details { margin-top: 10px; border: 2px solid #e5e7eb; border-radius: 8px; padding: 8px 12px; }
    #log { color: #16a34a; }
  </style>
</head>
<body>
  <button id="expand">Expand all</button>
  <button id="collapse">Collapse all</button>
  <details><summary>Step 1</summary><p>Create an account.</p></details>
  <details><summary>Step 2</summary><p>Pick a course.</p></details>
  <p id="log">Nothing toggled yet.</p>
  <script>
    const all = document.querySelectorAll('details');
    all.forEach((d) => d.addEventListener('toggle', () => {
      document.getElementById('log').textContent =
        d.querySelector('summary').textContent + (d.open ? ' opened' : ' closed');
    }));
    document.getElementById('expand').onclick = () => all.forEach((d) => { d.open = true; });
    document.getElementById('collapse').onclick = () => all.forEach((d) => { d.open = false; });
  </script>
</body>
</html>

«Expand all» задает open обоим, а журнал показывает последнее событие toggle. Событие не всплывает, поэтому слушайте его у каждого <details>, а не у родителя.

Что можно положить в summary

Summary содержит текст, строчные элементы или заголовок, если название раздела должно входить в структуру страницы:

<details>
  <summary><h3>Refund policy</h3></summary>
  <p>...</p>
</details>

Избегайте ссылок, кнопок и полей формы внутри <summary>: summary сама уже элемент управления, поэтому элемент управления внутри нее легко пропустить или задеть по ошибке, а программы чтения с экрана плохо объявляют вложенные элементы управления. Интерактивное содержимое ставьте в тело <details>.

Частые ошибки

Переключатель из <div> и JavaScript. <details> уже обрабатывает клики, клавиши и состояние для программ чтения с экрана. Когда действительно нужен свой переключатель, используйте кнопку с aria-expanded.
<summary> не на первом месте. Она должна быть первым дочерним элементом <details>.
Маркер скрыт без замены. Дайте читателям какой-то знак, что summary раскрывается, например плюс, как выше.
Скрытие содержимого через display. Переключайте open; CSS, который принудительно показывает или скрывает содержимое, конфликтует с состоянием браузера.
Исключающие группы для содержимого, которое сравнивают. Используйте name, только когда один открытый раздел за раз имеет смысл.

Часто задаваемые вопросы

Что делают details и summary в HTML?

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

Как сделать details открытым по умолчанию?

Добавьте логический атрибут open: <details open>. Браузер добавляет и удаляет этот атрибут, когда пользователь переключает блок, поэтому CSS может оформлять details[open].

Как сделать аккордеон, где открыт только один раздел?

Дайте всем <details> в группе одинаковый атрибут name, например name="faq". Открытие одного закрывает остальные в этой группе, без JavaScript.

Как убрать или изменить стрелку у summary?

Задайте summary значение list-style: none и добавьте summary::-webkit-details-marker { display: none; } для Safari. Затем нарисуйте свой индикатор, например через summary::after, и меняйте его через details[open] summary::after.

Можно ли узнать, когда details открывается?

Да. Слушайте событие toggle у элемента <details> и читайте его свойство open. Присваивание details.open = true в JavaScript открывает его.

Связанные концепции