Как сделать - Складывающийся/Аккордеонный контент (Меню-аккордеон)
Узнайте, как создать меню-аккордеон (складывающийся контент).
Аккордеон
Аккордеоны полезны, когда вы хотите переключаться между скрытием и отображением большого количества контента:
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;
}
/* Добавьте цвет фона к кнопке, если она нажата (добавьте класс .active с помощью 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" class,
выделить кнопку, управляющую панелью */
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'; /* Unicode символ для "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode символ для "minus" sign (-) */
}
Попробуйте сами »
Как сделать на сайте меню аккордеон с помощью HTML / CSS / JS? Видео
Видеоинструкция, как сделать на сайте меню-аккордеон.
