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

Статья, в которой рассмотрим процесс создания вертикального аккордеона для сайта с использованием CSS и JavaScript (без jQuery).

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

Процесс разработки вертикального аккордеона будет состоять из:

• создания HTML разметки;
• описания его внешнего вида с помощью CSS;
• написания логики на JavaScript.

Скриншот аккордеона:

Демо

HTML код аккордеона и его описание

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-header) и содержимое (accordion-item-content).

Состояние элемента (accordion-item) в аккордеоне определяется с помощью класса show. Если данный класс присутствует, то содержимое элемента (accordion-item-content) показывается. В противном случае оно скрыто.

Переключение состояния элемента (accordion-item) осуществляется посредством нажатия на заголовок (accordion-item-header).

CSS код аккордеона

Стили аккордеона:

.accordion__item {
  margin-bottom: 0.5rem;
  border-radius: 0.25rem;
  box-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 15%);
}

.accordion__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1rem;
  color: #fff;
  font-weight: 500;
  background-color: #0d6efd;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.2s ease-out;
}

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

.accordion__header:hover {
  background-color: #0b5ed7;
}

.accordion__item_hidden .accordion__header {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.accordion__body {
  padding: 0.75rem 1rem;
  overflow: hidden;
  background: #fff;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

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

Данный код выполняет стилизацию элементов аккордеона, добавляет к ним необходимые внутренние отступы, цвет текста, цвет фона и др. Но, кроме этого, он ещё определяет видимость элементов аккордеона с классом accordion-item-content, т.е. содержимого.

По умолчанию элементы, имеющие класс accordion-item-content не отображаются (CSS свойство display равно значению none). Включение отображения определённого элемента (accordion-item-content) осуществляется посредством класса show, который необходимо добавить к его родительскому элементу (accordion-item).

JavaScript код аккордеона

Сценарий (логика) аккордеона:

class ItcAccordion {
  constructor(target, config) {
    this._el = typeof target === 'string' ? document.querySelector(target) : target;
    const defaultConfig = {
      alwaysOpen: true
    };
    this._config = Object.assign(defaultConfig, config);
    this.addEventListener();
  }
  addEventListener() {
    this._el.addEventListener('click', (e) => {
      const elHeader = e.target.closest('.accordion__header');
      if (!elHeader) {
        return;
      }
      if (!this._config.alwaysOpen) {
        const elOpenItem = this._el.querySelector('.accordion__item_show');
        if (elOpenItem) {
          elOpenItem !== elHeader.parentElement ? elOpenItem.classList.toggle('accordion__item_show') : null;
        }
      }
      elHeader.parentElement.classList.toggle('accordion__item_show');
    });
  }
}

Сценарий JavaScript выполняет очень простые действия. Он добавляет обработчик события click для аккордеона. Далее в зависимости от того по какому заголовку кликнули, он добавляет и (или) удаляет класс show у необходимых(ого) элементов(а).

Инициализация элемента как аккордеон выполняется следующим образом:

new ItcAccordion(document.querySelector('.accordion'), {
  alwaysOpen: false
});

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

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

Демо

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

JavaScript: animated-accordion.js

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

Пример настройки аккордеона в качестве вертикального меню.

Дополнительно в JavaScript сценарий добавим небольшой фрагмент кода, который будет показывать сколько подпунктов имеет каждый пункт в этом меню.

Демо

HTML структура:

<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>
        <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>
      </div>
    </div>
    ...
  </div>

Файлы:

• CSS: menu-accordion.css;
• JavaScript: animated-accordion.js.

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

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

HTML, CSS и JavaScript код многоуровневого меню:

<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>

Файлы:

• CSS: multilevel-accordion.css;
• JavaScript: animated-accordion.js.