Атрибут hidden тега <details>
Описание
Атрибут hidden позволяет полностью скрыть элемент <details> и всё его содержимое. В отличие от состояния "закрыто", скрытый элемент не занимает места в потоке документа.
Важно: Скрытые элементы
Пример использования:
<details> нельзя раскрыть, пока атрибут hidden не будет удалён.
<details hidden>
<summary>Скрытый раздел</summary>
<p>Этот контент не виден на странице.</p>
</details>
<button onclick="toggleHidden()">Показать/скрыть</button>
<script>
function toggleHidden() {
const details = document.querySelector('details');
details.hidden = !details.hidden;
}
</script>
Сравнение состояний:
| Состояние | Атрибут | Видимость | Занимаемое место |
|---|---|---|---|
| Скрыто | hidden |
Полностью невидим | Нет |
| Закрыто | Нет open |
Виден только <summary> |
Да |
| Раскрыто | open |
Виден весь контент | Да |
Практическое применение:
<div class="admin-panel">
<details id="admin-section" hidden>
<summary>Административные настройки</summary>
<!-- Конфиденциальные настройки -->
</details>
</div>
<script>
// Показываем только администраторам
if (user.isAdmin) {
document.getElementById('admin-section').hidden = false;
}
</script>
Особенности работы:
- Эквивалентен CSS-свойству
display: none - Скрывает как
<summary>, так и содержимое - Элемент остаётся в DOM, но не участвует в визуальном рендеринге
- Не влияет на состояние
open(при снятии hidden сохраняется)
Рекомендации по использованию:
- Используйте для временного скрытия контента
- Не применяйте для конфиденциальных данных (код остаётся в HTML)
- Для постоянного скрытия лучше удалять элемент из DOM
- Сочетайте с ARIA-атрибутами для доступности
Альтернативные подходы:
<!-- Способ 1: CSS-класс -->
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
}
</style>
<details class="visually-hidden">
<summary>Скрыто CSS-классом</summary>
<p>Контент скрыт, но доступен для скринридеров</p>
</details>
<!-- Способ 2: JavaScript -->
<script>
// Полное удаление из DOM
function hideDetailsPermanently() {
const details = document.querySelector('details');
details.remove();
}
</script>
Доступность:
- Скрытые элементы недоступны для скринридеров
- Для скрытия с сохранением доступности используйте CSS-методы
- Избегайте скрытия важного контента без альтернатив
Примечание: Хотя атрибут hidden удобен для быстрого скрытия элементов, для сложных сценариев управления видимостью предпочтительнее использовать CSS-классы или JavaScript, обеспечивающие более гибкий контроль над отображением контента.