Как сделать - Складную секцию
Узнайте, как создать складную секцию.
Складная секция
Нажмите кнопку для переключения между отображением и скрытием складского содержимого.
Some collapsible content. Click the button to toggle between showing and hiding the collapsible content. 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="collapsible">Open Collapsible</button>
<div class="content">
<p>Lorem ipsum...</p>
</div>
Шаг 2) добавить CSS:
Стиль аккордеона:
Пример
/* Style the button that is used to open and close the
collapsible content */
.collapsible {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
/* Add a background color to the button if it is clicked on (add the
.active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {
background-color: #ccc;
}
/* Style the
collapsible content. Note:
hidden by default */
.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
и a 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'; /* Unicode
character for "plus" sign (+) */
font-size: 13px;
color: white;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2796"; /*
Unicode character for "minus" sign (-) */
}