Как создать вертикальный аккордеон для сайта

В этой статье разберём как можно очень просто создать вертикальный аккордеон для сайта на чистом CSS и JavaScript, а также, как сделать так, чтобы его контент плавно показывался и скрывался. Кроме этого, рассмотрим пример многоуровневого меню типа аккордеон.

Что такое аккордеон?

Аккордеон – это вертикально сложенный набор заголовков. Каждый из них может быть развернут, чтобы показать содержимое, связанное с ним. Этот элемент так называется из-за того, что принцип его действия напоминает музыкальный инструмент аккордеон.

Демо

В данном примере, при показе контента, связанного с заголовком, стрелочка, расположенная справа от него изменяет своё направление на противоположное. Данная стрелочка в этом аккордеоне реализована с помощью псевдоэлемента ::after следующим образом:

.accordion__header::after {
  flex-shrink: 0;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: auto;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-size: 1.25rem;
  content: "";
}

.accordion__item_show .accordion__header::after {
  transform: rotate(-180deg);
}

Очень часто на сайте аккордеоны используются для создания блока FAQ (последовательность вопросов и ответов).

Пример создания простого аккордеона

Процесс разработки вертикального аккордеона начнём с написания HTML разметки:

<div class="accordion">
  <div class="accordion__item accordion__item_show">
    <div class="accordion__header">
      Заголовок 1
    </div>
    <div class="accordion__body">
      Содержимое 1
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">
      Заголовок 2
    </div>
    <div class="accordion__body">
    Содержимое 2
    </div>
  </div>
  ...
</div>

Здесь:

• .accordion – это общая обертка для элементов, она непосредственно содержит .accordion__item;
• .accordion__item – это один элемент, внутри которого располагается заголовок .accordion__header и содержимое .accordion__body;
• .accordion__header – заголовок, при нажатию на который будет открываться .accordion__body;
• .accordion__body – содержимое, связанное с заголовком .accordion__header.

Раскрыт или нет .accordion__item определяется посредством класса accordion__item_show. Если данный класс присутствует у элемента, то .accordion__body показывается. В противном случае – нет.

Переключение состояния .accordion__item осуществляется посредством нажатия на заголовок .accordion__header.

Теперь зададим стили для аккордеона: accordion.css. Они очень простые. Разметка заголовка .accordion__header выполняется с помощью CSS Flexbox.

Самое основное, если .accordion__item не имеет класса accordion__item_show, элемент .accordion__body не показывается:

.accordion__item:not(.accordion__item_show) .accordion__body {
  display: none;
}

В противном случае .accordion__body показывается.

Остальные стили отвечают только за оформление аккордеона и к функционалу прямого отношения не имеют.

Последнее что осталось – это создать код на JavaScript. Задача JavaScript будет заключаться в переключении класса accordion__item_show у элемента .accordion__item при нажатии на .accordion__header. То есть JavaScript в зависимости от того по какому заголовку кликнули, будет просто добавлять или удалять класс accordion__item_show у .accordion__item:

this._el.addEventListener('click', (e) => {
  // получим элемент .accordion__header
  const elHeader = e.target.closest('.accordion__header');
  // если такой элемент не найден, то прекращаем выполнение функции
  if (!elHeader) {
    return;
  }
  // если необходимо, чтобы всегда был открыт один элемент
  if (!this._config.alwaysOpen) {
    // получим элемент с классом accordion__item_show и сохраним его в переменную elOpenItem
    const elOpenItem = this._el.querySelector('.accordion__item_show');
    // если такой элемент есть
    if (elOpenItem) {
      // и он не равен текущему, то переключим ему класс accordion__item_show
      elOpenItem !== elHeader.parentElement ? elOpenItem.classList.toggle('accordion__item_show') : null;
    }
  }
  // переключим класс accordion__item_show элемента .accordion__header
  elHeader.parentElement.classList.toggle('accordion__item_show');
});

Здесь приведён фрагмент кода. Он будет выполняться при создании нового экземпляра типа ItcAccordion. this._el будет указывать на общую обертку .accordion. Добавление обработчика события click для элемента this._el осуществляется с помощью метода addEventListener(). В качестве аргумента этому методу мы передаём стрелочную функцию, которая будет вызвана при возникновении данного события на этом элементе. Остальные действия пояснены с помощью комментариев.

Весь код JavaScript: accordion.js.

Как установить аккордеон на сайт

Для этого необходимо:

1. Вставить в нужно место страницы верстку аккордеона:

<div class="accordion" id="accordion-1">
  ...
</div>

2. Подключить к странице CSS и JavaScript файлы:

<link href="css/accordion.css" rel="stylesheet">
<script src="js/accordion.js"></script>

3. Инициализировать корневой элемент аккордеона как ItcAccordion с помощью оператора new:

new ItcAccordion('#accordion-1', {
  alwaysOpen: false
});

Свойство alwaysOpen определяет необходимо ли при открытии нового контента закрывать предыдущий. Если false, то необходимо. В противном случае не нужно. Кстати, значение true – это значение по умолчанию и в этом случае его можно не указывать:

new ItcAccordion('#accordion-1');

Демо

Аккордеон с анимацией скольжения

Добавление в аккордеон плавного показа или скрытия контента, связанного с заголовком, выполним на основе материала, приведённого в статье: «Создание аналога slideToggle() на чистом JavaScript».

Скриншот аккордеона, появление содержимого которого сопровождается CSS анимацией:

Демо

Стили аккордеона, включающие в себя анимацию, расположены на GitHub: animated-accordion.css.

Код JavaScript здесь: animated-accordion.js

Вертикальное меню аккордеон

Пример настройки аккордеона, приведённого выше, для использования его в качестве вертикального меню.

HTML верстка:

<div id="accordion" class="accordion">
  <div class="accordion__item">
    <div class="accordion__header">
      Заголовок 1
    </div>
    <div class="accordion__body">
      <div class="accordion__content">
        <a href="#">Пункт 1.1</a>
        <a href="#">Пункт 1.2</a>
        <a href="#">Пункт 1.3</a>
        ...
      </div>
    </div>
  </div>
  <div class="accordion__item">
    <div class="accordion__header">
      Заголовок 2
    </div>
    <div class="accordion__body">
      <div class="accordion__content">
        <a href="#">Пункт 2.1</a>
        <a href="#">Пункт 2.2</a>
        <a href="#">Пункт 2.3</a>
        ...
      </div>
    </div>
  </div>
  ...
</div>

Как видно он имеет точно такую же структуру, только в .accordion__content помещены ссылки.

В CSS дополнительно для стилизации <a> добавлен следующий код:

.accordion__content a {
  position: relative;
  display: block;
  padding: 0.5rem 1rem;
  color: #212529;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid rgb(0 0 0 / 12.5%);
}

.accordion__content a:last-child {
  border-bottom-right-radius: inherit;
  border-bottom-left-radius: inherit;
}

.accordion__content a:hover {
  background-color: #f8f9fa;
}

Демо

Итоговые файлы: menu-accordion.css и animated-accordion.js.

Многоуровневое меню аккордеон

Пример разметки многоуровневого вертикального меню аккордеон:

<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__header">
      Заголовок 1
    </div>
    <div class="accordion__body">
      <div class="accordion__content">
        <a href="#">Пункт 1.1</a>
        <div class="accordion__item">
          <div class="accordion__header">
            Пункт 1.2
          </div>
          <div class="accordion__body">
            <div class="accordion__content">
              <a href="#">Пункт 1.2.1</a>
              <a href="#">Пункт 1.2.2</a>
              <div class="accordion__item">
                <div class="accordion__header">
                  Пункт 1.2.3
                </div>
                <div class="accordion__body">
                  <div class="accordion__content">
                    <a href="#">Пункт 1.2.3.1</a>
                    <a href="#">Пункт 1.2.3.2</a>
                    <a href="#">Пункт 1.2.3.3</a>
                  </div>
                </div>
              </div>
              <a href="#">Пункт 1.2.4</a>
              <a href="#">Пункт 1.2.5</a>
            </div>
          </div>
        </div>
        <a href="#">Пункт 1.3</a>
      </div>
    </div>
  </div>
  ...
</div>

Здесь дополнительно добавлен ещё элемент .accordion__content.

CSS код для такого меню необходимо брать из файла multilevel-accordion.css, а JavaScript – как в предыдущем примере, т.е. из animated-accordion.js.