Как сделать - Складную секцию
Узнать, как создать складную секцию.
Складная секция
Нажмите кнопку, чтобы переключаться между отображением и скрытием складного содержимого.
Некоторые складные содержание. Нажмите кнопку для переключения между отображением и скрытием складной контента. 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 type="button" class="collapsible">Открыть</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Шаг 2) Добавить CSS:
Стиль аккордеон:
Пример
/* Стиль кнопка, которая используется для открытия и закрытия складного содержимого */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Добавить цвет фона для кнопки, если она нажата (добавить класс .active с JS), а при наведении на него курсора мыши (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Стиль складного содержимого. Примечание: скрыто по умолчанию */
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
Шаг 3) Добавить JavaScript:
Пример
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}Редактор кода »Анимация складной секции (слайд вниз)
Чтобы сделать анимацию складной, добавьте max-height: 0, overflow: hidden и transition для свойства max-height, к классу panel.
Затем используйте JavaScript, чтобы скользить вниз по содержимому, задав вычисляемый
max-height, в зависимости от высоты панели на разных размерах экрана:
Пример
<style>
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
</style>
<script>
var coll = document.getElementsByClassName("collapsible");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
});
}
</script>
Редактор кода »
Добавить иконки
Добавить символ для каждой кнопки, указывающий, является ли складное содержимое открытым или закрытым:
Пример
.collapsible:after {
content: '\02795'; /* Символ юникода для знака "плюс" (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: '\2796'; /* Символ юникода для знака "минус" (-) */
}
Редактор кода »
