Как сделать аккордеон в html css

Научитесь создавать аккордеон с помощью HTML и CSS с помощью нашей пошаговой инструкции. Мы пройдем по всем шагам создания аккордеона, покажем пример с использованием всех навыков.

Аккордеон можно сделать с помощью HTML, CSS и JavaScript. Это вид выпадающего меню, которое позволяет пользователю разворачивать и сворачивать секции с информацией. Пример аккордеона с использованием HTML, CSS и JavaScript приведен ниже.

Код HTML

<div class="accordion">
  <div class="accordion-item">
    <a>Section 1</a>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="accordion-item">
    <a>Section 2</a>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
  <div class="accordion-item">
    <a>Section 3</a>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>

Код CSS

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.accordion-item .content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: #f1f1f1;
}

Код JavaScript

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";
    }
  });
}

В приведенном выше примере создается аккордеон с 3 секциями. В каждой секции можно иметь свою собственную информацию. Когда пользователь кликает на секцию, она разворачивается и показывает информацию, а когда пользователь кликает повторно, секция закрывается. С помощью этого простого кода можно создать более комплексные аккордеоны, используя более сложные стили и применяя функции JavaScript.

Ответы (0)