Как изменить аккордеон?

Question

[kolykisel]

Здравствуйте,
Написал аккордеон на js, но не могу придумать как сделать так, что бы при клике на другой пункт, закрывался предыдущий, вот код

var questions = document.querySelectorAll('.question-item');
var answers = document.querySelectorAll('.question-item__text');
var icons = document.querySelectorAll('.question-item__icon');
questions.forEach(function (item, i, arr) {
    item.onclick = function () {
        answers[i].classList.toggle('question-item__text_active');
        icons[i].classList.toggle('question-item__icon_active');
    };
});

<div class="question-item">
						<div class="question-item__flex">
							<h3 class="question-item__title">Что такое Landing page?</h3>
							<div class="question-item__icon">&#8250;</div>
						</div>
						<p class="question-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan</p>
					</div>
					<div class="question-item">
						<div class="question-item__flex">
							<h3 class="question-item__title">Что такое Landing page?</h3>
							<div class="question-item__icon">&#8250;</div>
						</div>
						<p class="question-item__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra maecenas accumsan</p>
					</div>

Answer 1

[RAX7]

Попробуй вот так:

item.onclick = function () {
  answers.forEach(el => el.classList.remove('question-item__text_active'));
  icons.forEach(el => el.classList.remove('question-item__icon_active'));
  answers[i].classList.add('question-item__text_active');
  icons[i].classList.add('question-item__icon_active');
};

Comments

[kolykisel]

теперь при нажатии на сам пункт который открыл, он его не закрывает

[RAX7]

kolykisel,

item.onclick = function () {
  answers.forEach((el, index) => (index !== i) ? el.classList.remove('question-item__text_active') : '');
  icons.forEach((el, index) => (index !== i) ? el.classList.remove('question-item__icon_active') : '');
  answers[i].classList.toggle('question-item__text_active');
  icons[i].classList.toggle('question-item__icon_active');
};

[kolykisel]

Спасибо:)