Узнать, как создать складное аккордеон.
Складной аккордеон
Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого объема контента:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Создать складной аккордеон
Шаг 1) Добавить HTML:
<button class="accordion">Раздел 1</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Раздел 2</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
<button class="accordion">Раздел 3</button>
<div class="panel">
<p>Lorem ipsum...</p>
</div>
Шаг 2) Добавить CSS:
Стиль аккордеон:
/* Стиль кнопок, которые используются для открытия и закрытия панели аккордеона */
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}
/* Добавить цвет фона для кнопки, если она нажата (добавить .активный класс с JS), а при наведении на него курсора мыши (наведите курсор) */
.active, .accordion:hover {
background-color: #ccc;
}
/* Стиль аккордеон панели. Примечание: скрыто по умолчанию */
.panel {
padding: 0 18px;
background-color: white;
display: none;
overflow: hidden;
}
Шаг 3) Добавить JavaScript:
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Переключение между добавлением и удалением класса "active",
чтобы выделить кнопку, управляющую панелью */
this.classList.toggle("active");
/* Переключение между скрытием и отображением активной панели */
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
Попробуйте сами »
Анимированный аккордеон (Слайд вниз)
Чтобы сделать анимированный аккордеон, добавьте max-height: 0, overflow: hidden и transition для свойства max-height, к классу panel.
Затем используйте JavaScript, чтобы скользить вниз по содержимому, задав вычисляемый max-height, в зависимости от высоты панели на разных размерах экрана:
<style>
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>
Попробуйте сами »
Добавить иконки
Добавить символ для каждой кнопки, указывающий, является ли складное содержимое открытым или закрытым:
.accordion:after {
content: '\02795'; /* Символ юникода для "плюса" знак (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /* Символ юникода для "минуса" знак (-) */
}
Попробуйте сами »