Home Accordion JS code: hide any open accordion on clicking another one and how to add a + symbol for each accordion

Questions

Accordion JS code: hide any open accordion on clicking another one and how to add a + symbol for each accordion

August 11, 2022

The code below is added to create accordion elements in a page. Clicking on any of the accordions opens the accordion but it the accordion doesn’t close when another one is clicked.

PHP&HTML:

setTimeout(function() {
  var acc = document.getElementsByClassName("accordion");
  console.log(acc.length);
  var i;
  for (i = 0; i < acc.length; i++) {
    alert("In the loop!")
    acc[i].addEventListener("click", function() {
      console.log("Click event called!")
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    });
  }
}, 500);

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 1.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
}

      <?php 
        if ( have_rows( 'question_and_answer' ) ) :
          while ( have_rows( 'question_and_answer' ) ) : the_row();
          $label = get_sub_field( 'question' );
          $answer = get_sub_field( 'answer' );
      ?>
      <div class="row">
        <button class="accordion"><div class="question"><?php echo $label; ?></div></button>
        <div class="panel"><p class="answer"><?php echo $answer; ?></p></br></div>
      </div>
      <?php 
        endwhile; 
      ?>

Here is the link to the page on the staging site. Please see the section with the heading "FREQUENTLY ASKED QUESTIONS"

>Solution :

It’s because you never remove the active class from any previously clicked items:

setTimeout(function() {
  var acc = document.getElementsByClassName("accordion");
  console.log(acc.length);
  var i;
  for (i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
      const active = document.querySelector(".accordion.active");
      if (active) {
        active.classList.remove('active'); // remove active class from accordions
      }

      this.classList.add("active"); // add it to this one

      // do display using css
    });
  }
}, 500);

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 1.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  background: red;
}

.active+.panel {
  display: block;
}

<div class="row">
  <button class="accordion"><div class="question"><?php echo $label; ?></div></button>
  <div class="panel">
    <p class="answer">
      <?php echo $answer; ?>
    </p>
    </br>
  </div>
</div>
<div class="row">
  <button class="accordion"><div class="question"><?php echo $label; ?></div></button>
  <div class="panel">
    <p class="answer">
      <?php echo $answer; ?>
    </p>
    </br>
  </div>
</div>

As an alternative, you don’t actually need js to achieve this type of accordion, you can use radio buttons and css:

.accordion {
  display: block;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 1.5rem;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  display: none;
  background-color: white;
  overflow: hidden;
  background: red;
}

.radio {
  display: none;
}

.radio:checked~.panel {
  display: block;
}

<div class="row">
  <input type="radio" name="accordion" id="accordion1" class="radio">
  <div class="question"><label class="accordion" for="accordion1"><?php echo $label; ?></label></div>
  <div class="panel">
    <p class="answer">
      <?php echo $answer; ?>
    </p>
    <br>
  </div>
</div>
<div class="row">
  <input type="radio" name="accordion" id="accordion2" class="radio">
  <div class="question"><label class="accordion" for="accordion2"><?php echo $label; ?></label></div>
  <div class="panel">
    <p class="answer">
      <?php echo $answer; ?>
    </p>
    <br>
  </div>
</div>