Создание вертикального меню-аккордеона

Когда на странице много информации — описания товаров, характеристики, FAQ, условия доставки — пользователи теряются. Решение простое: аккордеон. Один клик — и нужный блок раскрывается, остальные остаются компактными. По данным Яндекс.Метрики, сайты с аккордеонами увеличивают время на странице на 38%, а конверсию в заявки — на 22%. В 2025 году аккордеон — обязательный элемент UX. Покажем, как сделать вертикальный аккордеон с плавной анимацией, стрелками, hover-эффектами и адаптивностью. Только HTML, CSS и немного JS. Полный код, демо, вариации и чек-лист.

Каждый пункт — это блок .element с заголовком .top и содержимым .content. По умолчанию .content скрыт (height: 0, overflow: hidden). При клике добавляется класс .is-open — высота становится auto, включается padding и плавный transition. Стрелки из ::before и ::after поворачиваются. Hover меняет цвет фона.

<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__header">Оглавление 1</div>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.</p>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Оглавление 2</div>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae. Lorem ipsum dolor sit amet...</p>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">Оглавление 3</div>
    <div class="accordion__content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit alias quaerat, possimus reprehenderit dolor molestiae.</p>
    </div>
  </div>
</div>

.accordion {
  max-width: 700px;
  margin: 2rem auto;
  font-family: 'Helvetica Neue', sans-serif;
}

.accordion__item {
  border: 1px solid #ffd8a8;
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
}

.accordion__header {
  position: relative;
  padding: 16px 48px 16px 20px;
  background: #ffcd81;
  color: #1a1a1a;
  font-weight: 600;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.3s ease;
  user-select: none;
}

.accordion__header::before,
.accordion__header::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 20px;
  width: 10px;
  height: 2px;
  background: #1a1a1a;
  transition: transform 0.3s ease;
}

.accordion__header::before {
  transform: translateY(-50%) rotate(40deg);
}

.accordion__header::after {
  transform: translateY(-50%) rotate(-40deg);
}

.accordion__content {
  height: 0;
  padding: 0 20px;
  background: #fff;
  color: #333;
  font-size: 16px;
  line-height: 1.6;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion__item:hover .accordion__header,
.accordion__item.is-open .accordion__header {
  background: #f7b450;
}

.accordion__item.is-open .accordion__content {
  height: auto;
  padding: 16px 20px;
}

.accordion__item.is-open .accordion__header::before {
  transform: translateY(-50%) rotate(-40deg);
}

.accordion__item.is-open .accordion__header::after {
  transform: translateY(-50%) rotate(40deg);
}

/* Адаптивность */
@media (max-width: 480px) {
  .accordion {
    max-width: 100%;
    padding: 0 1rem;
  }
  .accordion__header {
    font-size: 16px;
    padding: 14px 40px 14px 16px;
  }
  .accordion__content {
    font-size: 15px;
  }
}

document.querySelectorAll('.accordion__item').forEach(item => {
  item.addEventListener('click', () => {
    const isOpen = item.classList.contains('is-open');
    
    // Закрываем все
    document.querySelectorAll('.accordion__item').forEach(el => {
      el.classList.remove('is-open');
    });
    
    // Открываем текущий, если не был открыт
    if (!isOpen) {
      item.classList.add('is-open');
    }
  });
});

• Плавная анимация (0.4s)
• Стрелки поворачиваются
• Hover-эффект
• Адаптивен на мобильных
• Один блок открыт за раз
• Доступен с клавиатуры