Атрибут open тега <details>

Описание

Атрибут open определяет, должен ли элемент <details> быть изначально раскрытым при загрузке страницы. Это булевый атрибут - его наличие (без значения) делает блок раскрытым, отсутствие - скрытым.

Пример использования:
<details open> <summary>Подробности акции</summary> <p>Специальное предложение действительно до 31 декабря 2023 года.</p> </details> <details> <summary>Условия использования</summary> <p>Этот контент будет скрыт при загрузке.</p> </details>

Особенности работы:

Состояние Описание Как задать
Раскрыто Контент виден сразу <details open> или <details open="open">
Скрыто Контент скрыт (по умолчанию) <details> (без атрибута)

Динамическое управление:

<details id="dynamic-details"> <summary>Нажмите для управления</summary> <p>Этот блок можно программно раскрывать/закрывать.</p> </details> <button onclick="toggleDetails()">Переключить состояние</button> <script> function toggleDetails() { const details = document.getElementById('dynamic-details'); details.open = !details.open; // Инвертируем текущее состояние } </script>

Рекомендации по использованию:

  • Используйте для важной информации, которая должна быть сразу видна
  • Не злоупотребляйте - слишком много раскрытых элементов перегружают страницу
  • Сочетайте с JavaScript для сохранения состояния между перезагрузками
  • Для аккордеонов убедитесь, что только один элемент раскрыт одновременно

Пример с сохранением состояния:

<details id="remember-state"> <summary>Настройки пользователя</summary> <form> <!-- Форма с настройками --> </form> </details> <script> // Восстановление состояния при загрузке document.getElementById('remember-state').open = localStorage.getItem('detailsState') === 'open'; // Сохранение состояния при изменении document.getElementById('remember-state').addEventListener('toggle', function() { localStorage.setItem('detailsState', this.open ? 'open' : 'closed'); }); </script>

Стилизация раскрытого состояния:

<style> details[open] { background-color: #f8f9fa; border-left: 3px solid #4CAF50; padding: 10px; } details[open] summary { color: #4CAF50; font-weight: bold; } </style> <details open> <summary>Стилизованный раскрытый блок</summary> <p>Этот блок имеет особое оформление когда раскрыт.</p> </details>

Ограничения и совместимость:

  • Поддерживается во всех современных браузерах
  • В IE и Edge до версии 79 требует полифила
  • Состояние не сохраняется при обновлении страницы (без JavaScript)
  • Не влияет на SEO - скрытый контент индексируется

Примечание: Атрибут open особенно полезен для часто используемых элементов или важной информации, которая должна быть сразу видна. Для сложных интерфейсов рассмотрите использование JavaScript-библиотек для аккордеонов с дополнительными функциями (анимация, сохранение состояния и др.).