Раскрывающийся блок в HTML details

Главная

База знаний

html

Интерактивные элементы

Раскрывающийся блок в HTML - details

26 ноября 2025

Автор

Олег Марков

Введение

Тег details в HTML позволяет создавать нативные раскрывающиеся блоки без единой строки JavaScript. Вы получаете готовый элемент интерфейса, который умеет:

скрывать и показывать дополнительный контент по клику
реагировать на клавиатуру
работать с экранными читателями
правильно вести себя в браузерах и на мобильных устройствах

Смотрите, я покажу вам, как это выглядит в самом простом варианте:

<details>
  <summary>Показать подробности</summary>
  <p>Здесь расположен скрытый текст, который будет виден только после раскрытия блока.</p>
</details>

Как только вы добавляете такой код на страницу, браузер сам рисует стрелку, делает заголовок кликабельным и управляет состоянием раскрытия. Ваша задача — только правильно разметить и при необходимости стилизовать.

Теперь давайте разбираться подробнее, как устроен details, какие у него особенности и как вы можете использовать его в реальных проектах.

Базовый синтаксис и структура details

Минимальный рабочий пример

Начнем с минимальной структуры, которой достаточно, чтобы блок работал:

<details>
  <summary>Раскрыть блок</summary>
  <p>Этот текст будет скрыт, пока пользователь не нажмет на заголовок.</p>
</details>

Комментарии к структуре:

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

Обратите внимание, что без summary тег details тоже будет работать, но пользователь не увидит явного заголовка, и управлять таким блоком станет неудобно. Практически всегда стоит использовать summary.

Как работает поведение по умолчанию

Поведение элемента details реализовано браузером:

при первом рендеринге содержимое скрыто
при клике по summary элемент раскрывается
при повторном клике — сворачивается
состояние можно менять клавишей Enter или пробел, если фокус на summary
браузер добавляет стрелку слева от summary (можно переопределить стилями)

Никакого JavaScript для этого не требуется.

Атрибуты details и управление состоянием

Атрибут open

Главный атрибут, который есть у details, — open. Он управляет тем, раскрыт ли блок в текущий момент.

<details open>
  <summary>Этот блок открыт по умолчанию</summary>
  <p>Пользователь увидит этот текст сразу после загрузки страницы.</p>
</details>

Комментарии:

наличие атрибута open означает, что блок должен быть раскрыт
если атрибут убрать, блок свернется
значение атрибута не обязательно писать, достаточно самого имени: open

Теперь давайте посмотрим, как можно управлять этим атрибутом из JavaScript.

Управление открытием через JavaScript

Хотя details работает без JS, иногда вам нужно программно открывать или закрывать блоки. Вот пример:

<details id="faq-item">
  <summary>Часто задаваемый вопрос</summary>
  <p>Здесь находится ответ на вопрос.</p>
</details>

<button id="open-btn">Открыть</button>
<button id="close-btn">Закрыть</button>
<button id="toggle-btn">Переключить</button>

<script>
// Находим элементы в DOM
const details = document.getElementById('faq-item');
const openBtn = document.getElementById('open-btn');
const closeBtn = document.getElementById('close-btn');
const toggleBtn = document.getElementById('toggle-btn');

// Открываем блок - просто добавляем атрибут open
openBtn.addEventListener('click', () => {
  details.open = true; // Эквивалентно <details open>
});

// Закрываем блок - убираем атрибут open
closeBtn.addEventListener('click', () => {
  details.open = false; // Эквивалентно <details>
});

// Переключаем состояние
toggleBtn.addEventListener('click', () => {
  details.open = !details.open;
});
</script>

Смотрите, браузер предоставляет вам свойство open у DOM-элемента, и работать с ним очень просто.

summary — заголовок раскрывающегося блока

Роль summary в компоненте

Тег summary — это интерактивный заголовок details. Он:

получает фокус по табу
реагирует на клик и клавиатуру
управляет состоянием родительского details

Небольшой пример:

<details>
  <summary>Спойлер к фильму</summary>
  <p>Герой в конце истории меняет свою судьбу.</p>
</details>

Браузер сам сделает summary похожим на кнопку или заголовок, к которому можно применить стили.

Содержимое summary

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

<details>
  <summary>
    <span>Настройки профиля</span>
    <small>(настройки доступны только авторизованным пользователям)</small>
  </summary>
  <form>
    <!-- Здесь может быть форма редактирования профиля -->
  </form>
</details>

Важно учитывать:

summary должен быть первым дочерним элементом внутри details
логично держать в summary краткий заголовок и, при необходимости, иконку или короткое пояснение

Несколько summary внутри одного details

Формально HTML допускает несколько summary внутри одного details, но использовать так лучше не стоит. Браузеры ориентируются на первый summary как на заголовок, а остальные не будут вести себя как интерактивные заголовки.

Рекомендация — использовать ровно один summary на один details.

Семантика и доступность details

Как details воспринимают экранные читатели

Тег details был добавлен в HTML как семантический элемент. Он сообщает:

здесь есть раскрывающийся блок
внутри него есть заголовок (summary)
есть состояние открыто или закрыто

Экранные читатели и другие ассистивные технологии понимают это и умеют:

озвучивать заголовок, как элемент, который можно раскрыть
сообщать, раскрыт блок или свернут
управлять им с клавиатуры

По сравнению с самодельными аккордеонами на div и span это большое преимущество.

Стилизация details и summary

Базовая кастомизация внешнего вида

По умолчанию браузеры рисуют стрелочку слева от summary и выбирают шрифт на свое усмотрение. Вы можете изменить это с помощью CSS.

Давайте разберемся на примере:

<details class="faq-item">
  <summary>Как изменить внешний вид стрелки</summary>
  <p>Мы можем скрыть стандартный маркер и нарисовать свой.</p>
</details>

/* Стили для всего блока */
.faq-item {
  border: 1px solid #ccc;       /* Рисуем рамку вокруг блока */
  border-radius: 4px;           /* Немного скругляем углы */
  padding: 8px 12px;            /* Добавляем внутренние отступы */
  max-width: 500px;             /* Ограничиваем ширину блока */
  background-color: #fafafa;    /* Легкий фон */
}

/* Стили для заголовка summary */
.faq-item > summary {
  cursor: pointer;              /* Указываем, что по заголовку можно кликать */
  list-style: none;             /* Отключаем маркер в некоторых браузерах */
  font-weight: 600;             /* Делаем текст немного жирнее */
}

/* Убираем стандартный маркер в Chrome и подобных браузерах */
.faq-item > summary::-webkit-details-marker {
  display: none;                /* Скрываем стандартный маркер */
}

Теперь вы увидите аккуратный блок с рамкой и кастомным заголовком. Дальше можно добавить собственную иконку.

Добавление кастомной иконки раскрытия

Смотрите, я покажу вам, как добавить свою стрелку с помощью псевдоэлемента:

.faq-item > summary {
  position: relative;          /* Нужно для позиционирования стрелки */
  padding-left: 20px;         /* Оставляем место под стрелку слева */
}

/* Рисуем свою стрелку */
.faq-item > summary::before {
  content: '▶';                /* Символ стрелки вправо */
  position: absolute;
  left: 0;
  top: 0;
}

/* Поворачиваем стрелку при раскрытии блока */
.faq-item[open] > summary::before {
  content: '▼';                /* Символ стрелки вниз */
}

Комментарии:

мы скрыли стандартный маркер и отрисовали свою стрелку
при наличии атрибута open у details меняем символ стрелки
так пользователь видит, раскрыт блок или нет

Удаление стандартного маркера во всех браузерах

В разных браузерах отключение стандартного маркера делается по-разному. Чтобы охватить основные варианты, вы можете использовать набор правил:

details > summary {
  list-style: none;                   /* Для Firefox */
}

details > summary::-webkit-details-marker {
  display: none;                      /* Для Chrome и Safari */
}

Если вам нужно полностью контролировать внешний вид, такой подход будет полезнее всего.

Распространенные шаблоны использования details

FAQ и блоки с вопросами и ответами

Наиболее популярный сценарий — разделы FAQ. Давайте посмотрим, как сделать простой список вопросов и ответов:

<section>
  <h2>Часто задаваемые вопросы</h2>

  <details>
    <summary>Нужно ли подключать JavaScript для работы details</summary>
    <p>Нет. Тег details работает нативно, без JavaScript. JS может понадобиться только для дополнительных эффектов.</p>
  </details>

  <details>
    <summary>Можно ли вкладывать один details в другой</summary>
    <p>Да, но такой интерфейс нужно хорошо продумывать. Пользователю может быть трудно ориентироваться в сильно вложенной структуре.</p>
  </details>

  <details open>
    <summary>Почему этот вопрос уже раскрыт</summary>
    <p>Потому что к нему добавлен атрибут open, и браузер раскрывает такой блок по умолчанию.</p>
  </details>
</section>

Такой подход хорошо читается, семантически корректен и не требует сложного кода.

Спойлеры и скрытые подсказки

Еще один популярный вариант — спойлеры в статьях или учебных материалах. Теперь вы увидите, как это выглядит в коде:

<p>Попробуйте решить задачу самостоятельно, а затем откройте решение ниже.</p>

<details>
  <summary>Показать решение</summary>
  <pre><code>// Решение задачи на JavaScript
function sum(a, b) {
  // Складываем два числа и возвращаем результат
  return a + b;
}
</code></pre>
</details>

Здесь summary играет роль «спойлера», а внутри details хранится код с решением.

Технические сведения и дополнительные разделы

Вы можете использовать details для скрытия дополнительных технических деталей, которые не нужны большинству пользователей:

<p>Этот компонент настроен по умолчанию. Если нужно, вы можете изменить расширенные параметры.</p>

<details>
  <summary>Показать расширенные настройки</summary>
  <ul>
    <li>Таймаут подключения</li>
    <li>Уровень логирования</li>
    <li>Параметры кэширования</li>
  </ul>
</details>

Так вы не перегружаете интерфейс, но оставляете возможность углубиться в детали.

Вложенные details и сложные структуры

Вложенные раскрывающиеся блоки

Иногда возникает желание сделать многоуровневую структуру из раскрывающихся блоков. Технически это возможно:

<details>
  <summary>Настройки приложения</summary>

  <p>Общие настройки</p>

  <details>
    <summary>Уведомления</summary>
    <p>Тут вы можете настроить email и push-уведомления.</p>
  </details>

  <details>
    <summary>Безопасность</summary>
    <p>Здесь настраивается двухфакторная аутентификация и сессии.</p>
  </details>
</details>

Однако стоит помнить:

несколько уровней вложенности могут путать пользователя
на мобильных устройствах такой интерфейс выглядит перегруженным
лучше ограничиваться 1–2 уровнями или продумывать визуальную иерархию очень аккуратно

Управление несколькими details как аккордеоном

Если вы хотите реализовать поведение аккордеона, когда в группе может быть открыт только один блок, вам понадобится JavaScript.

Покажу вам, как это реализовано на практике:

<section id="faq">
  <details>
    <summary>Вопрос 1</summary>
    <p>Ответ на первый вопрос.</p>
  </details>
  <details>
    <summary>Вопрос 2</summary>
    <p>Ответ на второй вопрос.</p>
  </details>
  <details>
    <summary>Вопрос 3</summary>
    <p>Ответ на третий вопрос.</p>
  </details>
</section>

<script>
// Находим контейнер с вопросами
const faq = document.getElementById('faq');

// Вешаем обработчик событий на контейнер - использовать делегирование проще
faq.addEventListener('toggle', (event) => {
  // Проверяем, что событие пришло от элемента details
  const openedDetails = event.target;
  if (openedDetails.tagName !== 'DETAILS') return;

  // Если этот блок только что открылся
  if (openedDetails.open) {
    // Закрываем все остальные блоки в секции
    Array.from(faq.querySelectorAll('details')).forEach((details) => {
      if (details !== openedDetails) {
        details.open = false; // Закрываем остальные
      }
    });
  }
});
</script>

Комментарии:

событие toggle срабатывает у details при каждом изменении состояния
мы слушаем это событие и закрываем все остальные блоки, когда один открывается
получается знакомое поведение аккордеона, но на основе нативного элемента

Работа с событиями toggle

Событие toggle и его особенности

У элемента details есть полезное событие toggle. Оно возникает каждый раз, когда:

блок раскрывается (open становится true)
блок сворачивается (open становится false)

Теперь давайте посмотрим, как его использовать:

<details id="log-details">
  <summary>Расширенная информация</summary>
  <p>Здесь может быть лог, отладочные данные и другая информация.</p>
</details>

<script>
// Находим элемент details
const logDetails = document.getElementById('log-details');

// Подписываемся на событие toggle
logDetails.addEventListener('toggle', () => {
  // Проверяем текущее состояние
  if (logDetails.open) {
    console.log('Блок был открыт');   // Срабатывает при раскрытии
  } else {
    console.log('Блок был закрыт');   // Срабатывает при сворачивании
  }
});
</script>

Это событие удобно использовать для:

логирования действий пользователя
динамической подгрузки данных при первом открытии блока
анимации и синхронизации с другими элементами интерфейса

Ленивое подгружение содержимого

Представьте, что вам нужно показывать тяжелые данные (например, статистику) только тогда, когда пользователь открыл блок. Вы можете загрузить данные по событию toggle.

Давайте посмотрим, что происходит в следующем примере:

<details id="stats-details">
  <summary>Показать статистику</summary>
  <div id="stats-content">
    <!-- Здесь появятся данные после загрузки -->
  </div>
</details>

<script>
// Находим элементы
const statsDetails = document.getElementById('stats-details');
const statsContent = document.getElementById('stats-content');
let statsLoaded = false; // Флаг, чтобы не загружать данные повторно

statsDetails.addEventListener('toggle', async () => {
  // Если блок открыт и данные еще не загружены
  if (statsDetails.open && !statsLoaded) {
    statsLoaded = true; // Ставим флаг загрузки

    // Показываем временное сообщение
    statsContent.textContent = 'Загрузка статистики...';

    try {
      // Здесь вместо setTimeout может быть реальный запрос fetch
      await new Promise((resolve) => setTimeout(resolve, 1000));

      // Обновляем содержимое после "загрузки"
      statsContent.textContent = 'Статистика успешно загружена.';
    } catch (error) {
      // Обрабатываем ошибки загрузки
      statsContent.textContent = 'Не удалось загрузить статистику. Попробуйте позже.';
      statsLoaded = false; // Разрешаем повторную попытку
    }
  }
});
</script>

Таким образом, вы экономите ресурсы и не загружаете данные, которые могут не понадобиться.

Поведение details в разных браузерах

Поддержка браузерами

На сегодняшний день поддержка тега details хорошая во всех современных браузерах. Основные моменты:

Chrome, Firefox, Safari, Edge — поддерживают details и summary нативно
мобильные версии основных браузеров тоже поддерживают
совсем старые версии Internet Explorer и старые мобильные браузеры не поддерживают

Если вам важно поведение на очень старых браузерах, можно добавить полифилл. Но большинство современных проектов уже не ориентируются на такие версии.

Полифилл для старых браузеров (общая идея)

Чтобы старый браузер вел себя похоже на современные, обычно делают следующее:

проверяют поддержку свойства open у details
если поддержки нет, вешают обработчики клика и меняют стили вручную

Упрощенный пример проверки:

<script>
// Проверяем поддержку свойства open
const supportsDetails = 'open' in document.createElement('details');

if (!supportsDetails) {
  // Здесь можно инициализировать полифилл
  console.warn('Браузер не поддерживает <details>. Можно подключить полифилл.');
}
</script>

Реальный полифилл будет содержать обработку кликов по summary, переключение классов и имитацию состояния. Обычно его подключают готовым скриптом, а не пишут с нуля.

Анимации открытия и закрытия

Почему анимация не работает "из коробки"

По умолчанию раскрытие details происходит мгновенно, без анимации. Если вы попробуете анимировать height, вы столкнетесь с тем, что:

браузер не предоставляет плавного изменения высоты автоматически
содержимое просто появляется или исчезает

Для анимации вам нужно использовать CSS-переходы или JavaScript, чтобы управлять высотой или максимальной высотой.

Пример анимации через max-height

Здесь я размещаю пример, чтобы вам было проще понять один из вариантов решения:

<details class="animated">
  <summary>Раскрыть с анимацией</summary>
  <div class="content">
    <p>Этот текст будет плавно появляться при раскрытии блока.</p>
    <p>А также плавно исчезать при сворачивании.</p>
  </div>
</details>

/* Сбрасываем базовые стили */
details.animated > summary {
  cursor: pointer;
}

/* Обертка для анимируемого содержимого */
details.animated > .content {
  overflow: hidden;                 /* Скрываем лишний контент при анимации */
  max-height: 0;                    /* Сначала содержимое скрыто */
  transition: max-height 0.3s ease; /* Настраиваем плавный переход */
}

/* Когда блок открыт, увеличиваем max-height */
details.animated[open] > .content {
  max-height: 500px;                /* Достаточно большое значение, чтобы вместить контент */
}

Комментарии:

мы обернули содержимое в дополнительный div
анимируем max-height, потому что его можно плавно менять
значение 500px нужно подобрать с запасом, чтобы контент всегда помещался

Такой подход не идеален, но для многих случаев работает достаточно хорошо.

Сравнение details с самодельными решениями

Чем details лучше div-аккордеона с JavaScript

Когда вы делаете аккордеон на div и JavaScript, вы должны сами:

управлять видимостью содержимого
обрабатывать клавиатуру
добавлять aria-атрибуты для доступности
заботиться о фокусе и ролях

Тег details берет большую часть этой работы на себя:

состояние открыто или закрыто встроено в элемент
управление мышью и клавиатурой уже работает
поддержка ассистивных технологий реализована в браузере
DOM остается чище и проще

В итоге вы тратите меньше времени на реализацию и меньше рискуете ошибиться в мелочах.

Когда details использовать не стоит

Есть и ситуации, когда details может быть не лучшим выбором:

нужно сложное анимированное поведение, которое сильно зависит от фреймворка
требуется строгий контроль фокуса и ролей, отличающийся от стандартного
дизайн интерфейса вообще не предполагает схему «заголовок — скрытое содержимое»

Но в большинстве случаев, где вы просто хотите скрывать и показывать дополнительные данные, details — удобный и надежный вариант.

Практические советы по использованию details

Где details особенно уместен

Рассмотрим несколько типичных сценариев, где вы можете смело применять details:

FAQ-разделы на сайтах и лендингах
технические спецификации с дополнительными подробностями
разделы документации, где часть информации второстепенна
спойлеры в учебных материалах и статьях
настройки, которые не нужны большинству пользователей

Чего стоит избегать

Чтобы элемент не создавал проблем, обратите внимание на несколько моментов:

не прячьте критически важную информацию в details, если пользователь может ее не заметить
не злоупотребляйте вложенностью — два уровня уже могут быть пределом
старайтесь не делать заголовок слишком длинным, это ухудшает читаемость

Также полезно протестировать поведение:

с клавиатурой (Tab, Enter, пробел)
на мобильных устройствах
в разных браузерах, если вы много кастомизируете стили

Заключение

Тег details — это простой и при этом достаточно мощный инструмент, который HTML предоставляет «из коробки» для создания раскрывающихся блоков. Вы получаете:

нативное поведение с поддержкой клавиатуры и экранных читателей
лаконичный и понятный HTML-код
возможность тонкой стилизации и интеграции с JavaScript при необходимости

Вы можете начинать с базового варианта — всего двух тегов, details и summary, — и постепенно добавлять:

кастомные стили и иконки
обработку события toggle
«аккордеонное» поведение с помощью небольшого скрипта
ленивую подгрузку данных при раскрытии блока

Важно понимать, что details не решает абсолютно все задачи интерфейса, но отлично закрывает сценарии, где нужно просто скрывать и показывать дополнительные данные, не усложняя реализацию.

Частозадаваемые технические вопросы по теме и ответы

Как сделать так, чтобы все details на странице были закрыты при загрузке, даже если в HTML у них есть open

Если вы хотите принудительно закрыть все блоки, вы можете снять атрибут open при инициализации страницы.

<script>
// Находим все элементы details на странице
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('details').forEach((details) => {
    details.open = false; // Закрываем каждый блок при загрузке
  });
});
</script>

Так вы получите единое состояние независимо от разметки.

Как программно открыть конкретный details и проскроллить к нему

Иногда нужно не только раскрыть блок, но и прокрутить страницу к нему.

<script>
function openAndScrollTo(id) {
  const details = document.getElementById(id);
  if (!details) return;

  details.open = true;              // Открываем блок
  details.scrollIntoView({          // Прокручиваем страницу к блоку
    behavior: 'smooth',             // Плавная прокрутка
    block: 'start'                  // Выравнивание по верхнему краю
  });
}
</script>

Теперь вы можете вызвать openAndScrollTo('faq-item-3') из любого обработчика.

Как изменить текст summary при раскрытии и сворачивании блока

Иногда нужно показывать разный текст в заголовке в зависимости от состояния.

<details id="dynamic">
  <summary id="dynamic-summary">Показать детали</summary>
  <p>Содержимое блока.</p>
</details>

<script>
const dynamic = document.getElementById('dynamic');
const summary = document.getElementById('dynamic-summary');

dynamic.addEventListener('toggle', () => {
  if (dynamic.open) {
    summary.textContent = 'Скрыть детали';  // Текст при открытом блоке
  } else {
    summary.textContent = 'Показать детали'; // Текст при закрытом блоке
  }
});
</script>

Так вы синхронизируете текст заголовка с реальным состоянием блока.

Как запретить пользователю закрывать определенный details

Бывает ситуация, когда блок должен быть всегда открыт, но при этом нужен стиль details и summary.

<details id="locked" open>
  <summary>Этот блок нельзя закрыть</summary>
  <p>Содержимое, которое должно всегда быть видно.</p>
</details>

<script>
const locked = document.getElementById('locked');

locked.addEventListener('toggle', () => {
  // Если блок пытаются закрыть, снова открываем его
  if (!locked.open) {
    locked.open = true;
  }
});
</script>

Этот прием не идеален с точки зрения UX, поэтому применять его стоит осторожно.

Как синхронизировать состояние нескольких details с URL (например, через hash)

Если вы хотите, чтобы состояние блока зависело от части URL, можно использовать hash.

<details id="section-1">
  <summary>Раздел 1</summary>
  <p>Содержимое раздела 1.</p>
</details>

<script>
function syncDetailsWithHash() {
  const hash = window.location.hash.slice(1); // Убираем символ #
  if (!hash) return;

  const details = document.getElementById(hash);
  if (details && details.tagName === 'DETAILS') {
    details.open = true; // Открываем блок, который соответствует hash
    details.scrollIntoView({ behavior: 'smooth', block: 'start' });
  }
}

window.addEventListener('hashchange', syncDetailsWithHash);
window.addEventListener('DOMContentLoaded', syncDetailsWithHash);
</script>

Так вы можете делать ссылки вида page.html#section-1, которые автоматически раскрывают нужный блок.