Элемент details HTML: готовые аккордеоны без JS

Главное преимущество details заключается в его простоте и «из коробочной» функциональности: браузер самостоятельно обрабатывает логику открытия и закрытия. Это не только экономит время разработчика, но и повышает доступность контента для пользователей с ограниченными возможностями и поисковых роботов, так как элемент имеет чёткую семантическую нагрузку.

Основная структура элемента предельно проста:

<details>
  <summary>Заголовок или метка, по которой кликают</summary>
  <p>Скрытый контент, который появляется при открытии.</p>
</details>

Пример 1

Тег <details> является контейнером. Внутри него первый тег <summary> задаёт видимый заголовок-триггер. Всё, что идёт после <summary>, считается скрытым содержимым и может включать любые другие HTML-элементы: текст, изображения, списки, видео, формы. Состояние элемента (открыт/закрыт) можно контролировать с помощью булевого атрибута open. Если он добавлен, контент будет отображён по умолчанию.

Понимание базового синтаксиса details html — это первый шаг к эффективному использованию этого элемента. Как уже упоминалось, конструкция строится вокруг двух основных тегов: details и summary. Важно помнить, что summary должен быть первым дочерним элементом внутри details. Хотя элемент работает и без него, его отсутствие приведёт к использованию браузером заголовка по умолчанию (например, «Подробности»), что нежелательно с точки зрения UX.

Ключевые атрибуты элемента:

• open: Единственный специфический атрибут для details. Его наличие (даже просто open) указывает браузеру, что содержимое должно быть раскрыто при первоначальной загрузке страницы.
• Глобальные атрибуты: Элемент также поддерживает все глобальные атрибуты HTML, такие как id, class, style, data-*, которые используются для стилизации и взаимодействия с JavaScript.

Рассмотрим более сложный пример:

<details class="faq-elem" id="faq-1" open>
  <summary class="faq-question">
    <strong>Как быстро будет готов мой сайт?</strong>
  </summary>
  <div class="faq-answer">
    <p>Сроки разработки зависят от сложности проекта. Типовой лендинг мы делаем за 2-3 недели, а для корпоративного портала может потребоваться 2-3 месяца. Точные сроки определяются после составления технического задания.</p>
    <ul>
      <li>Лендинг: 2-3 недели</li>
      <li>Сайт-визитка: 3-4 недели</li>
      <li>Интернет-магазин: от 1.5 месяцев</li>
    </ul>
  </div>
</details>

Пример 2

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

Что можно стилизовать:

1. Контейнер details: Фон, отступы, рамки, скругления, тени.
2. Заголовок summary: Шрифт, цвет, фон, состояние при наведении (:hover), иконки вместо стандартного маркера.
3. Состояние открыто/закрыто: Используя селектор details[open] summary или details[open], можно применять стили только когда элемент раскрыт.

Ключевой момент — убрать стандартный маркер. Это делается через свойство list-style для summary:

/* Базовый сброс стандартного вида */
summary {
  list-style: none; /* Убираем стандартный треугольник */
  cursor: pointer; /* Меняем курсор на "руку" */
  padding: 1rem;
  background-color: #f0f7ff;
  border-radius: 8px;
  font-weight: bold;
  position: relative; /* Для позиционирования своей иконки */
}
/* Добавляем свою иконку "плюс" для закрытого состояния */
summary::before {
  content: '+';
  position: absolute;
  right: 1rem;
  font-size: 1.5rem;
  transition: transform 0.3s ease;
}
/* Меняем иконку на "минус" для открытого состояния */
details[open] summary::before {
  content: '-';
}
/* Стили для контента */
details[open] .faq-answer {
  padding: 1rem;
  border-left: 3px solid #3498db;
  background-color: #f9f9f9;
  animation: fadeIn 0.3s ease; /* Простая анимация появления */
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

С помощью таких приёмов элемент details легко интегрируется в любую современную дизайн-систему.

Он автоматически получает роль aria-role="group", а состояние открыто/закрыто управляется через встроенные атрибуты aria-expanded (true/false), которые обновляются браузером. Это огромное преимущество перед кастомными JavaScript-аккордеонами, где всю эту логику и ARIA-атрибуты разработчик должен прописывать вручную, что часто упускается.

Сравним ключевые аспекты:

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

Хотя элемент details самодостаточен, его возможности можно значительно расширить с помощью управления через JavaScript. Например, вы можете создать поведение «аккордеона», где открытие одного элемента автоматически закрывает другие. Также можно добавлять плавные анимации раскрытия высоты, так как нативная анимация перехода высоты от 0 до auto пока поддерживается лишь некоторыми основными браузерами.

Пример реализации аккордеона на чистом JS:

<details class="accordion-item">
  <summary>Раздел 1</summary>
  <p>Контент 1...</p>
</details>
<details class="accordion-item">
  <summary>Раздел 2</summary>
  <p>Контент 2...</p>
</details>

// Находим все элементы аккордеона
const accordionItems = document.querySelectorAll('.accordion-item');

// Добавляем обработчик клика на каждый
accordionItems.forEach(item => {
  const summary = item.querySelector('summary');
  summary.addEventListener('click', (e) => {
    // Если текущий элемент уже открыт, просто позволяем ему закрыться
    if (item.hasAttribute('open')) {
      return;
    }
    // Закрываем все остальные открытые элементы
    accordionItems.forEach(otherItem => {
      if (otherItem !== item && otherItem.hasAttribute('open')) {
        otherItem.removeAttribute('open');
      }
    });
  });
});

Пример 3

Для сложных анимаций высоты можно использовать JavaScript для вычисления высоты скрытого контента и анимированного изменения свойства max-height у внутреннего контейнера. Это делает details html мощным инструментом для создания сложных интерактивных интерфейсов.

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

1. FAQ (Часто задаваемые вопросы): Это классический вариант. Каждый вопрос — это summary, ответ — скрытый контент. Это улучшает SEO (структурированные данные) и UX.
2. Спойлеры для рецензий или обзоров: Чтобы скрыть ключевые сюжетные моменты от тех, кто ещё не смотрел фильм или не читал книгу.
3. Дополнительные параметры в фильтрах интернет-магазина: Основные фильтры видны сразу, а расширенные можно убрать в раскрывающийся блок.
4. Многоуровневое меню (с осторожностью): Вложенные элементы details могут создавать структуру меню, но важно продумать доступность на мобильных устройствах.
5. Пошаговые инструкции или чек-листы: Где каждый шаг можно открыть для получения детальных пояснений.
6. Компактные таблицы данных: Где под основной строкой скрывается расширенная информация.

Пример для фильтров:

<details class="filter-group">
  <summary class="filter-title">Дополнительные характеристики</summary>
  <div class="filter-content">
    <label><input type="checkbox"> Материал: Дерево</label>
    <label><input type="checkbox"> Материал: Металл</label>
    <label><input type="checkbox"> Страна: Россия</label>
  </div>
</details>

Использование details в этих сценариях делает интерфейс чище, интуитивно понятнее и быстрее загружается.

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

Хотите реализовать современные, быстрые и доступные аккордеоны, FAQ-блоки или сложные интерактивные элементы на своём сайте? Обращайтесь в нашу веб-студию!

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