js аккордеон без id

Question

Нужно сделать аккордеон где при нажатии на .item-btn у класса .item-content будет добавляться или убираться класс .item-content--active. Это работать должно без id.

У меня получилось только при нажатии на .item, но это не подходит. Надо чтобы только при нажатии на .item-btn у класса .item-content будет добавляться или убираться класс .item-content--active.

document.querySelectorAll('.item').forEach((event) =>
  event.addEventListener('click', () => {
    event.querySelector('.item-content').classList.toggle('item-content--active');
  })
);

.item {
  width: 300px;
  margin-top: 10px;
}

.item-btn {
  background-color: green;
  width: 300px;
  height: 30px;
  cursor: pointer;
}

.item-content {
  display: none;
  background-color: pink;
  width: 300px;
  height: 30px;
}

.item-content--active {
  display: block;
}

<div class="item">
  <div class="item-btn">
    111
  </div>
  <div class="item-content">
    222
  </div>
</div>
<div class="item">
  <div class="item-btn">
    111
  </div>
  <div class="item-content">
    222
  </div>
</div>
<div class="item">
  <div class="item-btn">
    111
  </div>
  <div class="item-content">
    222
  </div>
</div>

Answer 1

Используй element.closest, чтобы получить родительский элемент и ищи контент внутри него уже.

document.querySelectorAll('.item-btn').forEach((btn) =>
    btn.addEventListener('click', () => {
        btn
          .closest('.item')
          .querySelector('.item-content')
          .classList
          .toggle('item-content--active');
    } )  
);

БЛОГ НА HUSL

js аккордеон без id

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