Акордеон JS + CSS

Акордеон слугує для того, щоб можна було перемикатися між частинами великої кількості контетну. В даному уроці ми будемо розробляти з вами акордеон на JS + CSS.

See the Pen
Акордеон
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Створення акордеону на

Крок 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), а також при наведенні миші на дану кнопку(hover) */
.active, .accordion:hover {
  background-color: #ccc;
}

/* Стилізуємо панель акордеону. За замовчуванням стоїть overflow: hidden */
.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";
    }
  });
}

Анімований акордеон (слайд вниз)

Щоб зробити анімований акордеон на JS + CSS, додайте max-height: 0overflow: hiddenі transitionдля властивості max-height класу panel.

Після цього скористайтеся 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>

See the Pen
Анімований акордеон
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

Додання піктограми

Додайте символ до кожної кнопки, щоб вказати розкритий чи прихований вміст:

.accordion:after {
  content: '795'; /* Unicode кодування для знаку "плюс" (+) */
  font-size: 13px;
  color: #777;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "96"; /* nicode кодування для знаку "мінус" (-) */
}

See the Pen
Акордеон з піктограмами
by Vladislav Groniuk (@vladislav-groniuk)
on CodePen.

На цьому в мене все. Сподіваюсь, що даний урок був для вас цікавим і корисним і відтепер ви зможете використовувати створений акордеон в ваших проектах.

Також вам може бути цікавий урок по створенню прогрес-бару.

Перекладач: Гронюк Владислав
Посилання на оригінал: https://www.w3schools.com/howto/howto_js_accordion.asp

Сподобався урок? Поділись з друзями!

Вам також може сподобатись

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *

Повідомити про помилку

Текст, який буде надіслано нашим редакторам: