Аккордеон на чистом HTML

Одна из частых задач, которая стоит перед верстальщиками, это создания аккордеона. По ссылке можно увидеть, как он выглядит на 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.

Если для вас это не проблема — смело используйте.