В этой статье рассказазываю как создать аккордеон, используя только стили.
Разметка
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!
Вместо добавления дополнительного класса будем ориентироваться на псевдокласс :checked элемента input.
Стили
.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.
