<details>, <summary>

Нативный раскрывающийся блок с контентом без магии и JavaScript.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Блок с раскрывающимся контентом на чистом HTML.

Пример

Секция статьи "Пример"

Самый простой раскрывающийся блок выглядит вот так:

        
          
          <details>  <summary>Легенда</summary>  <p>Раскрывающийся текст</p></details>
          <details>
  <summary>Легенда</summary>
  <p>Раскрывающийся текст</p>
</details>

        
        
          
        
      
Открыть демо в новой вкладке

Как понять

Секция статьи "Как понять"

Иногда нужно скрывать какую-то информацию на странице в специальном блоке. Чтобы в любой момент можно было кликнуть на этот блок и развернуть информацию. И свернуть обратно таким же кликом. Такой блок ещё называют «аккордеоном».

Как пишется

Секция статьи "Как пишется"

Тег <details> — это интерактивный элемент, при нажатии на который открывается блок с информацией — текстом или картинками. Нередко такие элементы можно встретить на страницах с часто задаваемыми вопросами (FAQ), где в заголовке (или легенде) написан вопрос, а ответом является содержимое «аккордеона».

Тег <summary> — это заголовок «аккордеона», так называемая легенда. Он необязателен — без него в качестве легенды будет написан текст «Подробнее», «Details» или нечто подобное — в зависимости от выбранного языка и браузера.

Собирается «аккордеон» очень просто: в <details> вкладываем <summary> и теги с информацией, которая будет показываться при нажатии.

По умолчанию «аккордеон» закрыт, но если мы хотим, чтобы его содержание показывалось сразу при загрузке страницы или открывать его из JavaScript, нужно добавить к нему атрибут open.

        
          
          <details open>  <summary>Легенда</summary>  <p>Раскрывающийся текст</p></details>
          <details open>
  <summary>Легенда</summary>
  <p>Раскрывающийся текст</p>
</details>

        
        
          
        
      
Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"

💡 Можно вкладывать <details> в <details>.

💡 <details> — это интерактивный элемент, но вкладывать другие интерактивные элементы в него можно.

💡 В HTML-стандарте написано, что <summary> должен быть первым ребёнком в <details>, но на деле всё прекрасно работает, даже если <summary> находится между тегами содержательной части «аккордеона».

💡 Вёрстка не ломается, если вложить <summary> в <summary> — в таком случае будет только один элемент ::marker (треугольник перед легендой).

💡 Если в «аккордеоне» будет несколько <summary> подряд, браузер будет реагировать только на первый, а остальные даже не отобразятся, хотя будут стоять в разметке.

💡 Если указать просто <summary> без <details>, то он будет вести себя как обычный <div> — блочный элемент без интерактивности.

На практике

Секция статьи "На практике"

Лена Райан советует

Секция статьи "Лена Райан советует"

🛠 Если присутствует тег <summary>, то псевдоэлемент ::marker можно стилизовать — правда, он реагирует не на все свойства, но как минимум вы сможете поменять цвет и размер шрифта. Раньше для его стилизации нужно было использовать ::-webkit-details-marker.