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

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

5 месяцев·С нуля

Профессиональная верстка

Адаптивная вёрстка для отображения на любых устройствах

Посмотреть →

10 месяцев·С нуля

Фронтенд-разработчик

Изучите HTML, CSS, JavaScript и React

Посмотреть →

2 месяца·Для продвинутых

Bootstrap

Изучите навык для работы с Bootstrap 5, SASS и Gulp для быстрой вёрстки

Посмотреть →

1 месяц·Для продвинутых

Позиционирование в CSS

Получите навык работы с CSS и адаптивными интерфейсами

Посмотреть →

1 месяц·Для продвинутых

Анимация CSS

Освоите CSS-анимации для улучшения UX

Посмотреть →

Каталог

Полный список доступных курсов по разным направлениям

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

• details нельзя анимировать.
• Отсутствует поддержка IE.

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