Для того чтобы реализовать accordion на чистом Javascript воспользуемся решением, разобранным в статье про то как реализовать аналог jQuery slideToggle на чистом Javascript.
Основным требованием к аккордеону будет возможность добавления неограниченного количества элементов без необходимости модификации кода.
CSS стили:
.accordion-item{
border: 1px solid black;
margin-bottom: 10px;
}
.accordion-item__title{
font-size: 20px;
padding: 5px;
position: relative;
cursor: pointer;
}
.accordion-item__title::before{
content: '';
position: absolute;
top: 15px;
right: 10px;
height: 2px;
width: 15px;
background: black;
}
.accordion-item__title::after{
content: '';
position: absolute;
top: 9px;
right: 16px;
height: 15px;
width: 2px;
background: black;
transition: all ease 0.2s;
}
.accordion-item__title.active::after{
transform: rotate(90deg);
}
.accordion-item__content{
transition: height .25s ease;
overflow: hidden;
}
.accordion-item__content-wr{
font-size: 16px;
padding: 5px;
}
.accordion-item__content:not(.active) {
display: none;
}
Теперь напишем Javascript-код. Нам просто нужно применить код для slideToggle с незначительными изменениями для всех элементов, используя цикл for:
var accordionItemTitles = document.querySelectorAll(".accordion-item__title");
for (var i = 0; i < accordionItemTitles.length; i++) {
accordionItemTitles[i].addEventListener("click",
function (event) {
event.preventDefault();
event.target.classList.toggle("active");
var accordionItemContent = event.target.nextElementSibling;
if (!accordionItemContent.classList.contains('active')) {
accordionItemContent.classList.add('active');
accordionItemContent.style.height = 'auto';
var height = accordionItemContent.clientHeight + 'px';
accordionItemContent.style.height = '0px';
setTimeout(function () {
accordionItemContent.style.height = height;
}, 0);
} else {
accordionItemContent.style.height = '0px';
accordionItemContent.addEventListener('transitionend',
function () {
accordionItemContent.classList.remove('active');
}, {
once: true
});
}
});
}
« список статей