Как создать: сгибаемое содержимое/аккордеон

Узнайте, как создать аккордеон (сворачиваемое содержимое).

Аккордеон

Аккордеон очень полезен, когда нужно переключаться между скрытием и отображением большого объема контента:

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", чтобы выделить кнопки панели управления */
    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 и max-height переходный эффект свойства.

Затем, используя 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'; /* "Плюс" (+) символ в Юникоде */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}
.active:after {
  content: "\2796"; /* "Минус" (\u2212) символ в Юникоде */
}

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