Иногда на сайт необходимо добавить так называемое меню аккордеон, и многие сталкиваются с проблемой в процессе создания меню аккордеона.

Я вам расскажу и дам готовый код для создания меню в виде аккордеона.

Что это такое.

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

Чаще всего меню аккордеон используется для создания вопросов и ответов на сайте, чтобы компактно разместить их на странице, но также можно использовать его для меню на сайте. Для этого нужно задать структуру и стили ниже вы можете их найти ниже.

Структура HTML меню аккордеона

 <div id="accordion" class="accordion" style="max-width: 30rem; margin: 1rem auto;">
    <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>
          <a href="#">Пункт 1.4</a>
          <a href="#">Пункт 1.5</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>
          <a href="#">Пункт 2.4</a>
          <a href="#">Пункт 2.5</a>
        </div>
      </div>
    </div>
    <div class="accordion__item">
      <div class="accordion__header">
        Заголовок 3
      </div>
      <div class="accordion__body">
        <div class="accordion__content">
          <a href="#">Пункт 3.1</a>
          <a href="#">Пункт 3.2</a>
          <a href="#">Пункт 3.3</a>
          <a href="#">Пункт 3.4</a>
          <a href="#">Пункт 3.5</a>
        </div>
      </div>
    </div>
  </div>

Стили 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("dаta: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: "";transition: transform 0.2s ease-out; }
    .accordion__item_show .accordion__header::after,.accordion__item_slidedown .accordion__header::after {transform: rotate(-180deg);}
    .accordion__header:hover { background-color: #0b5ed7; }
    .accordion__item:not(.accordion__item_show) .accordion__header { border-bottom-right-radius: 0.25rem; border-bottom-left-radius: 0.25rem; }
    .accordion__content {display: flex;flex-direction: column; background: #fff;border-bottom-right-radius: 0.25rem;border-bottom-left-radius: 0.25rem;}
    .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;}
   .accordion__item:not(.accordion__item_show) .accordion__body {    display: none;}

И наконец скрипт CSS

class ItcAccordion {
  constructor(target, config) {
    this._el = typeof target === 'string' ? document.querySelector(target) : target;
    const defaultConfig = {
      alwaysOpen: true,
      duration: 350
    };
    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 ? this.toggle(elOpenItem) : null;
        }
      }
      this.toggle(elHeader.parentElement);
    });
  }
  show(el) {
    const elBody = el.querySelector('.accordion__body');
    if (elBody.classList.contains('collapsing') || el.classList.contains('accordion__item_show')) {
      return;
    }
    elBody.style.display = 'block';
    const height = elBody.offsetHeight;
    elBody.style.height = 0;
    elBody.style.overflow = 'hidden';
    elBody.style.transition = `height ${this._config.duration}ms ease`;
    elBody.classList.add('collapsing');
    el.classList.add('accordion__item_slidedown');
    elBody.offsetHeight;
    elBody.style.height = `${height}px`;
    window.setTimeout(() => {
      elBody.classList.remove('collapsing');
      el.classList.remove('accordion__item_slidedown');
      elBody.classList.add('collapse');
      el.classList.add('accordion__item_show');
      elBody.style.display = '';
      elBody.style.height = '';
      elBody.style.transition = '';
      elBody.style.overflow = '';
    }, this._config.duration);
  }
  hide(el) {
    const elBody = el.querySelector('.accordion__body');
    if (elBody.classList.contains('collapsing') || !el.classList.contains('accordion__item_show')) {
      return;
    }
    elBody.style.height = `${elBody.offsetHeight}px`;
    elBody.offsetHeight;
    elBody.style.display = 'block';
    elBody.style.height = 0;
    elBody.style.overflow = 'hidden';
    elBody.style.transition = `height ${this._config.duration}ms ease`;
    elBody.classList.remove('collapse');
    el.classList.remove('accordion__item_show');
    elBody.classList.add('collapsing');
    window.setTimeout(() => {
      elBody.classList.remove('collapsing');
      elBody.classList.add('collapse');
      elBody.style.display = '';
      elBody.style.height = '';
      elBody.style.transition = '';
      elBody.style.overflow = '';
    }, this._config.duration);
  }
  toggle(el) {
    el.classList.contains('accordion__item_show') ? this.hide(el) : this.show(el);
  }
}

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

Вот этот участок кода что ниже отвечает за то оставлять ли открытым предыдущее открытое меню или нет.

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

Если вам нужна помощь, и вы не можете справится с каким то элементом в верстке, пишите мне помогу бесплатно.

Если вам была полезна данная статья, то поделитесь данной статьей в социальной сети. А если вам нужна помощь в настройке сайта, нужна верстка или что то еще то жду Вас на kwork .