Javascript accordion collapse on new tab opened

Issue

How when I click on the accordion and accordion open And then we want to click on another accordion. The previous accordion I opened remains open how can i fix that please help me thanks

let acc = document.getElementsByClassName('ac-btn');
let i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle('active-accardacon');
    this.classList.toggle('active-ac');
    this.nextElementSibling.classList.toggle('show');
  }
}

<div class="accardacons">
  <h2>توضیحات مراحل</h2>

  <div class="ac">
    <button class='ac-btn'>نحوه کارکرد پروژهای ما چگونه است ؟</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>توضیحات مراحل بیشتر کار</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>آیا واقعا به شما میشود اعتماد کرد ؟</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>چه تضمینی برای کارتان دارید</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

</div>

Solution

The toggleAccordion() function below complements what you're doing. It follows these steps:

• Toggle the respective classes for the clicked accordion's elements (the button and its next sibling <div>), as you're already doing;
• Looks for the elements which have those classes and, for each one, remove the classes unless the element in question is the button that was just clicked or its next sibling <div>.

let acc = document.querySelectorAll('.ac-btn');

function toggleAccordion() {
  this.classList.toggle('active-accardacon');
  this.classList.toggle('active-ac');
  this.nextElementSibling.classList.toggle('show');
  this.closest('.accardacons').querySelectorAll('.active-accardacon, .show').forEach(element => {
    if (element !== this && element !== this.nextElementSibling) {
      element.classList.remove('active-accardacon', 'active-ac', 'show');
    }
  });
}

acc.forEach(button => {
  button.addEventListener('click', toggleAccordion);
});

<div class="accardacons">
  <h2>توضیحات مراحل</h2>

  <div class="ac">
    <button class='ac-btn'>نحوه کارکرد پروژهای ما چگونه است ؟</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>توضیحات مراحل بیشتر کار</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>آیا واقعا به شما میشود اعتماد کرد ؟</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

  <div class="ac">
    <button class='ac-btn'>چه تضمینی برای کارتان دارید</button>
    <div class="read-more-ac">
      <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>
    </div>
  </div>

</div>

Answered By - BSdoukos