Как создать: эффект складывания

Учимся создавать складывающиеся части.

Эффект сворачиваемости

Нажмите эту кнопку, чтобы переключаться между отображением и скрытием сворачиваемого содержимого.

Некоторое сворачиваемое содержимое. Нажмите кнопку, чтобы переключаться между отображением и скрытием сворачиваемого содержимого. 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.

Попробуйте сами

Создать эффект сворачиваемости

Первый шаг - добавить HTML:

<button type="button" class="collapsible">Открыть сворачиваемое</button>
<div class="content">
  <p>Lorem ipsum...</p>
</div>

Второй шаг - добавить 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) */
.active, .collapsible:hover {
  background-color: #ccc;
}
/* Установить стиль содержимого, которое можно сворачивать. Замечание: по умолчанию скрыто */
.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}

Третий шаг - добавить 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: hide и max-height атрибут.

Затем, используя 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 字符 */
  font-size: 13px;
  color: white;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* 表示“减号”（-）的 Unicode 字符 */
}

Попробуйте сами