Узнать, как создать складную секцию используя HTML, CSS и JavaScript.
Складная секция
Нажмите кнопку, чтобы переключаться между отображением и скрытием складного содержимого.
Некоторые складные содержание. Нажмите кнопку для переключения между отображением и скрытием складной контента. 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'; /* Символ юникода для знака "минус" (-) */
}
Попробуйте сами »