Часто бывает, что нужно сделать раскрывающийся “аккордеон” список. Раньше для это требовалось писать JavaScript. Теперь в HTML5 появился тег details, который предоставляет возможность делать раскрывающийся блок без написания JS.
Весь контент оборачивается в тег details, а заголовок при нажатии на который будет раскрываться контент пишется в тег summary. Сам же контент идет после заголовка в любом удобном для вас виде.
<details>
<summary>Заголовок</summary>
<p>Раскрывающийся контент</p>
</details>Заголовок
Раскрывающийся контент
Дефолтный дизайн выглядит очень просто, но и изменяется он без проблем. Стилизуется все как обычно, только для скрытия стандартной стрелки используется свойством list-style.
summary {
list-style: none;
}Заголовок
Раскрывающийся контент
Если необходимо чтобы блок был изначально раскрытым, то в этом случает тегу details добавляется атрибут open.
<details open>
<summary>Заголовок</summary>
<p>Раскрывающийся контент</p>
</details>Заголовок
Раскрывающийся контент
Чтобы анимировать открытие и закрытие аккордиона, нужно добавить открытому тегу details padding снизу и тегу summary margin-bottom. Более хорошую плавность анимации можно достичь играясь с размерами padding, еще как вариант на этот padding, можно сместить контент отрицательным margin.
А что если необходимо при открытии одного списка скрывать все остальные? То просто добавьте одинаковый атрибут name для каждого details