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

В этой статье рассказазываю как создать аккордеон, используя только стили.

Содержание

• Разметка
• Стили
• Разберем по частям

Разметка

input.question-input(id='question' type='checkbox')
label.question-label(for='question') Click me?
.answer Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque officia ipsum quam sequi! Ratione dolorem ad quam maxime a facere voluptate? Nulla dignissimos iure dolorum, a fuga excepturi sunt modi!

Вместо добавления дополнительного класса будем ориентироваться на псевдокласс

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

Анимация CSS

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

Посмотреть →

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

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

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

Посмотреть →

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

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

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

Посмотреть →

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

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

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

Посмотреть →

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

SASS

Освоите препроцессор SASS и стилизацию веб-приложений

Посмотреть →

Каталог

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

Стили

.question-input {
 display: none;
}

.answer {
 height: 0;
 overflow: hidden;
 transition: 0.5s;
}

.question-input:checked + .question-label + .answer {
 height: auto;
 padding: 10px 0;
}

Разберем по частям

Скрываем чекбокс:

.question-input {
 display: none;
}

Правильней это делать через паттерн visually hidden, но для учебного примера хватит.

Задаем стили для ответа:

.answer {
 // обнуляем высоту
 height: 0;
 // скрываем блок
 overflow: hidden;
 // задаем длительность анимации
 transition: 0.5s;
}

И описываем правила для раскрытого аккордеона:

.question-input:checked + .question-label + .answer {
 height: auto;
 padding: 10px 0;
}

Анимированный пузырь / SVG без использования JS и Canvas

Создадим анимированную фигуру пузыря без JS и даже Canvas.

2 ноября 2021 г.

Как в 16 лет попасть программистом на стажировку в TJournal

Всем привет, в этой статье я хочу поделиться, как я познакомился с Хекслетом, почему я решил стат...

2 ноября 2021 г.

Почему так важно проходить дополнительные испытания в конце курса?

Если вы считаете, что прочитав всю теоретическую часть, сдав все тесты и выполнив все упражнения ...

1 ноября 2021 г.

Пара слов об анимации — она не самая удачная:

Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение. Именно поэтому, в качестве хака, мы используем padding.

Если такая анимация вас устраивает — считайте вам повезло, а если она и вовсе не нужна — читайте следующую статью про создание аккордеона на чистом HTML.

Актуальное демо смотрите в моем codepen.