Как сделать - Складной/Аккордеон
Узнать, как создать аккордеон (складное содержимое).
Аккордеон
Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого объема контента:
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"; /* Символ юникода для "минуса" знак (-) */
}
Редактор кода »
