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

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

Стили

.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;
}

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

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

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

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