Одна из частых задач, которая стоит перед верстальщиками, это создания аккордеона. По ссылке можно увидеть, как он выглядит на Bootstrap.
Первый порыв большинства разработчиков — установить библиотеку или запрограммировать ее самостоятельно. Но не все знают, что для решения этой задачи существует тег Details.
Вот как выглядит готовое решение:
<details>
<summary>How to create accordion without JavaScript?</summary>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Facilis id recusandae tempore nam placeat ratione accusantium maiores nobis velit, incidunt, hic, omnis dolorem possimus. Hic porro tenetur fugiat blanditiis iste.
</details>
Вот и все. Это один из тех случаев, когда задачу можно решить без программирования :)
Но важно помнить о двух вещах:
- details нельзя анимировать.
- Отсутствует поддержка IE.
Если для вас это не проблема — смело используйте.
