Сделать многоуровневый аккордеон (аккордеон внутри аккордеона)

Question

Код работает для открытия аккордеонов, но не учтена возможность того, что внутри аккордеона будет еще один аккордеон, помогите, пожалуйста, такое сделать. Буду очень благодарен!

const acc = document.querySelectorAll(".accordion__item");
acc.forEach((item) => {
  item.addEventListener('click', () => {
    item.classList.toggle('accordion__item_show');
    const accordionBody = item.querySelectorAll('.accordion__body');
    accordionBody.forEach(box => {
      if (box.style.maxHeight) {
        box.style.maxHeight = null;
      } else {
        box.style.maxHeight = box.scrollHeight + 'px';
      }
    });
  });
});

// стили для аккордеона
.accordion__item {
  background-color: #f4f4f4;
  border-radius: 5px;
  margin-top: 20px;
}

.accordion__item-fix {
  background: none;
  .accordion__header {
    padding: 10px 10px 10px 30px;
    background: none;
  }
  .accordion__content>a {
    padding-left: 40px;
  }
  margin-top: 0;
}

.accordion__header,
.accordion__item-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  color: #212529;
  cursor: pointer;
}

.accordion__header::after,
.accordion__item-link::after {
  flex-shrink: 0;
  width: 9px;
  height: 13px;
  margin-left: auto;
  background-image: url("../img/catalog/arrow.svg");
  background-repeat: no-repeat;
  content: "";
}

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

.accordion__item_show:nth-child(2)>.accordion__header::after,
.accordion__item_show:nth-child(11)>.accordion__header::after,
.accordion__item_show:nth-child(12)>.accordion__header::after {
  transform: rotate(0);
}

.accordion__item>.accordion__item {
  border: 1px solid black;
}

.accordion__content {
  display: flex;
  flex-direction: column;
  background: #fff;
}

.accordion__content>a {
  position: relative;
  display: block;
  color: #090b0d;
  text-decoration: none;
  line-height: 60px;
  height: 60px;
  padding: 0px 10px 0px 30px;
  &:last-child {
    border-radius: 0 0 5px 5px;
  }
  // для центрирования текста по вертикали
  // использовать размер, отталкиваясь от высоты самого блока
  line-height: 60px;
}

.accordion__body {
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s ease-in-out;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div class="accordion__item">
    <div class="accordion__header">
      Запчасти
    </div>
    <div class="accordion__body">
      <div class="accordion__content">
        <a class="accordion__content-link" href="#">Запчасти для ТО</a>
        <a class="accordion__content-link" href="#">Рама, кузов</a>
        <a class="accordion__content-link" href="#">Обвес кузова</a>
        <a class="accordion__content-link" href="#">Электрика</a>
        <a class="accordion__content-link" href="#">Освещение, сигнализация</a>
        <a class="accordion__content-link" href="#">Система охлаждения</a>
        <a class="accordion__content-link" href="#">Тормозная система</a>
        <a class="accordion__content-link" href="#">Трансмиссия, элементы подвески и управления</a>
        <a class="accordion__content-link" href="#">Питание и управление двигателем, выхлопная          система</a>
        <a class="accordion__content-link" href="#">Колеса</a>
        <a class="accordion__content-link" href="#">Двигатель</a>
      </div>
    </div>
  </div>
  <br>
  <div class="accordion__item">
    <div class="accordion__header">
      Тюнинг и Аксессуары
    </div>
    <div class="accordion__body">
      <div class="accordion__content">
        <a class="accordion__content-link" href="#">Сумки и багаж</a>
        <a class="accordion__content-link" href="#">Противоугонные устройства</a>
        <a class="accordion__content-link" href="#">Держатели навигаторов</a>
        <a class="accordion__content-link" href="#">Чехлы</a>
        <a class="accordion__content-link" href="#">Боковые зеркала и аксессуары</a>
        <div class="accordion__item accordion__item-fix">
          <div class="accordion__header">
            Мотоэлектроника
          </div>
          <div class="accordion__body">
            <div class="accordion__content">
              <a class="accordion__content-link" href="#">Акустика</a>
              <a class="accordion__content-link" href="#">Навигаторы</a>
              <a class="accordion__content-link" href="#">Мотогарнитуры</a>
              <a class="accordion__content-link" href="#">Свет</a>
              <a class="accordion__content-link" href="#">Сигнализации</a>
            </div>
          </div>
        </div>
        <div class="accordion__item accordion__item-fix">
          <div class="accordion__header">
            Гаражное оборудование
          </div>
          <div class="accordion__body">
            <div class="accordion__content">
              <a class="accordion__content-link" href="#">Рампы</a>
              <a class="accordion__content-link" href="#">Подкаты</a>
              <a class="accordion__content-link" href="#">Подъемники</a>
            </div>
          </div>
        </div>
        <a class="accordion__content-link" href="#">Звезды и цепи</a>
        <a class="accordion__content-link" href="#">Наклейки и накладки</a>
        <a class="accordion__content-link" href="#">Ручки и грипсы</a>
        <a class="accordion__content-link" href="#">Обтекатели и стекла</a>
        <a class="accordion__content-link" href="#">Фильтры</a>
        <a class="accordion__content-link" href="#">Выхлоп</a>
        <div class="accordion__item accordion__item-fix">
          <div class="accordion__header">
            Защита
          </div>
          <div class="accordion__body">
            <div class="accordion__content">
              <a class="accordion__content-link" href="#">Защита ручек</a>
              <a class="accordion__content-link" href="#">Защита двигателя</a>
              <a class="accordion__content-link" href="#">Защита кофров</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

То есть сейчас у меня в "Тюнинг и Аксессуары" есть аккордеоны, но они уже открыты при нажатии на "Тюнинг и Аксессуары", как это исправить?

БЛОГ НА HUSL

Сделать многоуровневый аккордеон (аккордеон внутри аккордеона)

Ответы (0 шт):