Рассмотрим два варианта создания аккордеона на примере списка вопросов и ответов. Сделаем это через:
— JavaScript;
— Тег Details;
JavaScript
Создадим простую разметку:
<button class="question">What is question?</button>
<div class="answer">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorem dicta blanditiis eum dolorum sit voluptatum impedit eius similique quasi obcaecati! Mollitia reprehenderit magni ex. Eaque modi corrupti placeat labore possimus.
</div>
И сразу же добавим стили:
.answer {
height: 0;
overflow: hidden;
}
.is-active + .answer {
height: auto;
}
Как все будет работать:
— В кнопке с классом question храним сам вопрос;
— В div с классом answer храним ответ, задаем ему нулевую высоту;
— При нажатии на кнопку присваиваем ей класс is-active;
— Раскрываем answer через соседний селектор.
Зададим добавление класса is-active через JavaScript:
// Находим кнопку с вопросом
const question = document.querySelector('.question');
// Добавляем слушатель на клик
question.addEventListener('click', ({ target }) => {
// Меняем состояние кнопки
target.classList.toggle('is-active');
});
Все, пара строк кода и аккордеон готов?
С одной стороны да, но данный вариант имеет один недостаток — ответ появляется «резко», без плавного раскрытия.
Связано это с тем, что height: auto; нельзя анимировать через transition, необходимо знать точное значение.
Что с этим делать — обсудим в следующей статье, а пока можете ознакомиться с полной версией кода в codepen.
Тег 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>
Все, копипасть и в продакшен?
Есть ньюансы.
Во-первых, details имеет тот же недостаток, что и первый вариант — нельзя анимировать активное состояние аккордеона.
Во-вторых, отсутствует поддержка IE.
Во всех остальных случаях можно смело использовать, а если вам нравится как я копирую документацию, то можете еще раз сходить в codepen :)
