Аккордеон на чистом 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>

Вот и все. Это один из тех случаев, когда задачу можно решить без программирования :)

Но важно помнить о двух вещах:

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