Пошук уроків, статей та іншого контенту
Показує, як створювати розгортні блоки з додатковою інформацією за допомогою details і summary.
details і summary<details> створює розгортний блок, а <summary> визначає його заголовок. Вміст усередині details, крім summary, прихований за замовчуванням і стає видимим після натискання на заголовок.
Це нативні HTML-елементи, тому для базової роботи не потрібні JavaScript або сторонні бібліотеки.
<details>
<summary>Що таке HTML?</summary>
<p>
HTML — це мова розмітки, яка визначає структуру вебсторінки.
</p>
</details>У закритому стані користувач бачить лише текст summary. Після натискання браузер показує абзац із поясненням.
summary має бути першим дочірнім елементом details.
<details>
<summary>Додаткова інформація</summary>
<p>Цей текст прихований, доки користувач не розгорне блок.</p>
<ul>
<li>Пункт перший</li>
<li>Пункт другий</li>
</ul>
</details>Усередині details можна розміщувати звичайний HTML-вміст:
абзаци;
списки;
зображення;
посилання;
форми;
інші елементи, потрібні для додаткової інформації.
summary зазвичай містить короткий і зрозумілий опис прихованого вмісту.
Щоб блок був відкритим одразу після завантаження сторінки, додайте булевий атрибут open:
<details open>
<summary>Відкрите пояснення</summary>
<p>
Цей текст видно одразу, але користувач може згорнути його натисканням на заголовок.
</p>
</details>Для булевих атрибутів важлива сама наявність атрибута. Значення true не потрібне:
<!-- Правильно -->
<details open>
<!-- Також відкритий, але зайве записувати значення -->
<details open="true">Щоб блок був закритим за замовчуванням, просто не додавайте open.
Браузер додає до summary стандартний маркер, зазвичай трикутник. Вигляд елементів можна змінити за допомогою CSS.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Розгортний FAQ-блок</title>
<style>
:root {
font-family: Arial, sans-serif;
color: #1f2937;
background-color: #f3f4f6;
}
body {
max-width: 720px;
margin: 40px auto;
padding: 0 20px;
}
.faq {
background-color: #ffffff;
border: 1px solid #d1d5db;
border-radius: 8px;
overflow: hidden;
}
.faq + .faq {
margin-top: 12px;
}
.faq summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 16px 20px;
cursor: pointer;
font-weight: 700;
list-style: none;
}
/* Приховуємо стандартний маркер у різних браузерах */
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: "+";
color: #2563eb;
font-size: 24px;
line-height: 1;
}
.faq[open] summary::after {
content: "−";
}
.faq summary:hover {
background-color: #eff6ff;
}
.faq summary:focus-visible {
outline: 3px solid #93c5fd;
outline-offset: -3px;
}
.faq__content {
padding: 0 20px 16px;
color: #4b5563;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Поширені запитання</h1>
<details class="faq">
<summary>Чи потрібен JavaScript для details?</summary>
<div class="faq__content">
<p>
Ні. Браузер самостійно обробляє відкриття та закриття елемента.
</p>
</div>
</details>
<details class="faq">
<summary>Чи можна розміщувати всередині список?</summary>
<div class="faq__content">
<p>Так. Усередині details дозволений звичайний структурований HTML-вміст.</p>
<ul>
<li>Текстові пояснення</li>
<li>Списки</li>
<li>Посилання</li>
</ul>
</div>
</details>
<details class="faq" open>
<summary>Який блок відкритий за замовчуванням?</summary>
<div class="faq__content">
<p>
Блок із атрибутом open відкривається одразу після завантаження сторінки.
</p>
</div>
</details>
</body>
</html>[open]Коли користувач відкриває details, браузер додає цьому елементу атрибут open. Коли користувач закриває блок, атрибут зникає.
Тому стан можна стилізувати за допомогою атрибутивного селектора:
details[open] {
border-color: #2563eb;
}
details[open] summary {
color: #2563eb;
}Цей селектор працює і для стану, заданого в HTML, і для стану, зміненого користувачем.
Стандартний маркер можна приховати, а власний символ додати через псевдоелемент ::after:
summary {
list-style: none;
}
summary::-webkit-details-marker {
display: none;
}
summary::after {
content: "＋";
}
details[open] summary::after {
content: "−";
}Якщо не потрібно створювати власний маркер, краще залишити стандартний. Він уже знайомий користувачам і показує, що заголовок можна розгорнути.
details і summary мають вбудовану поведінку, корисну для доступності:
summary можна активувати клавіатурою;
стан відкриття та закриття доступний браузеру;
користувач може розгортати блок без JavaScript;
структура зрозуміла допоміжним технологіям краще, ніж блок, який лише імітує кнопку за допомогою div.
Текст summary має пояснювати, що знаходиться всередині:
<!-- Добре -->
<summary>Як змінити пароль?</summary>
<!-- Гірше -->
<summary>Докладніше</summary>Короткий заголовок на кшталт «Докладніше» не дає достатньо інформації користувачеві, особливо якщо на сторінці таких блоків кілька.
Якщо ви змінюєте дизайн summary, не прибирайте видимий стан фокуса:
summary:focus-visible {
outline: 3px solid #2563eb;
outline-offset: 3px;
}Це допомагає користувачам клавіатури зрозуміти, який елемент зараз активний.
Кілька елементів details працюють незалежно один від одного:
<section aria-labelledby="rules-title">
<h2 id="rules-title">Правила використання</h2>
<details>
<summary>Правило перше</summary>
<p>Користувач має вказувати правдиві дані.</p>
</details>
<details>
<summary>Правило друге</summary>
<p>Один обліковий запис призначений для одного користувача.</p>
</details>
<details>
<summary>Правило третє</summary>
<p>Пароль не можна передавати іншим людям.</p>
</details>
</section>Відкриття одного блока не закриває інші. Це зручно для FAQ, довідки та секцій із додатковими поясненнями.
detailsdetails добре підходить для вмісту, який:
не є основним для першого перегляду;
має короткий заголовок;
повинен бути доступним за запитом;
може бути відкритий або закритий без зміни URL;
не потребує складної логіки.
Типові приклади:
поширені запитання;
пояснення термінів;
технічні характеристики;
додаткові умови;
розшифрування приміток;
розділи довідки.
Не варто приховувати в details важливу інформацію, яку користувач обов’язково має побачити одразу. Наприклад, основну інструкцію для виконання критичної дії краще не ховати в закритий блок.
div замість summary<!-- Неправильно для стандартної поведінки details -->
<details>
<div class="title">Відкрити пояснення</div>
<p>Текст пояснення.</p>
</details>Для керування розгортанням використовуйте summary:
<details>
<summary>Відкрити пояснення</summary>
<p>Текст пояснення.</p>
</details>summary не першим<!-- Небажана структура -->
<details>
<p>Текст перед заголовком.</p>
<summary>Заголовок</summary>
</details>Правильна структура починається із summary:
<details>
<summary>Заголовок</summary>
<p>Текст після заголовка.</p>
</details>open="false"<!-- Блок усе одно буде відкритим -->
<details open="false">
<summary>Деталі</summary>
<p>Вміст блока.</p>
</details>open — булевий атрибут. Якщо він присутній, блок відкритий. Для закритого стану атрибут потрібно видалити:
<details>
<summary>Деталі</summary>
<p>Вміст блока.</p>
</details>/* Погано: користувач клавіатури не бачить активний елемент */
summary:focus {
outline: none;
}Якщо стандартний фокус не підходить дизайну, замініть його власним стилем, а не прибирайте повністю.
summary має залишатися схожим на елемент, який можна натиснути. Не використовуйте стилі, через які він виглядає як звичайний нерухомий текст.
Створіть блок FAQ із трьома запитаннями:
Що роблять елементи details і summary?
Як відкрити блок за замовчуванням?
Чи потрібен JavaScript для базової поведінки?
Додаткові умови:
кожне запитання має бути окремим details;
відповідь має бути всередині відповідного details;
одне запитання має бути відкритим за замовчуванням;
додайте власний стиль для станів hover і focus-visible;
змініть символ маркера для відкритого та закритого станів.
details створює розгортний блок.
summary є видимим заголовком і керує відкриттям блока.
Вміст після summary прихований, якщо немає атрибута open.
Атрибут open відкриває блок за замовчуванням.
Стан відкриття можна стилізувати через details[open].
Для базової поведінки не потрібен JavaScript.
Зрозумілий текст summary і видимий фокус важливі для доступності.
details варто використовувати для додаткової, а не критично важливої інформації.