When expanding and collapsing an Accordion, the icons are not toggling accordingly to it

Question

I have an accordion that expands and collapses. This accordion also has icons to represent when an accordion is expanded or collapsed with +/-. The problem is that, say if I expand item 1 and then I expand item 2. Item 1 gets collapsed fine, but the icon remain as minus, but it should be plus because it is collapsed. So the issue is that, it's not getting toggled properly. Here is the code: https://jsfiddle.net/y35rbzsd/

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function(evnt) {

    const currClassList = evnt.target.classList;
    if (currClassList.contains('collapsed')) {
        evnt.target.classList.remove("collapsed");
        evnt.target.querySelector('.fa').classList.remove("fa-minus");
        evnt.target.querySelector('.fa').classList.add("fa-plus");
        var content = evnt.target.nextElementSibling;
        content.style.maxHeight = null;
    } else {
      for (var j = 0; j < coll.length; j++) {
           coll[j].classList.remove("collapsed")
           coll[j].nextElementSibling.style.maxHeight = null;
      }
      this.classList.toggle("collapsed");
              evnt.target.querySelector('.fa').classList.remove("fa-plus");
        evnt.target.querySelector('.fa').classList.add("fa-minus");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Answer 1

You can add these lines:

coll[j].querySelector('.fa').classList.add("fa-plus");
coll[j].querySelector('.fa').classList.remove("fa-minus");

to the following section:

for (var j = 0; j < coll.length; j++) {
  coll[j].classList.remove("collapsed")
  coll[j].nextElementSibling.style.maxHeight = null;
}

Demo

 var coll = document.getElementsByClassName("accordion-toggle"); for (var i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function(evnt) { const currClassList = evnt.target.classList; if (currClassList.contains('collapsed')) { evnt.target.classList.remove("collapsed"); evnt.target.querySelector('.fa').classList.remove("fa-minus"); evnt.target.querySelector('.fa').classList.add("fa-plus"); var content = evnt.target.nextElementSibling; content.style.maxHeight = null; } else { for (var j = 0; j < coll.length; j++) { coll[j].classList.remove("collapsed") coll[j].nextElementSibling.style.maxHeight = null; coll[j].querySelector('.fa').classList.add("fa-plus"); coll[j].querySelector('.fa').classList.remove("fa-minus"); } this.classList.toggle("collapsed"); evnt.target.querySelector('.fa').classList.remove("fa-plus"); evnt.target.querySelector('.fa').classList.add("fa-minus"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } } }); } 

 .accordion-toggle { background-color: #777; color: white; cursor: pointer; padding: 18px; width: calc(100% - 18px); border: none; text-align: left; outline: none; font-size: 15px; } .collapsed, .accordion-toggle:hover { background-color: #555; } .collapse { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .container { max-width: 100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="container"> <h2 class="accordion-toggle">Open Collapsible<i class="fa fa-plus pull-right"></i></h2> <div id="anyId" class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h2 class="accordion-toggle">Open Section 1<i class="fa fa-plus pull-right"></i></h2> <div class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> 

Answer 2

Have you tried using Jquery to shorten the code?

 $('.accordion-toggle').click(function(){ var temp = true; //get the current state // if($(this).children().hasClass('fa-minus')){ temp = true; }else{ temp = false; } //reset all // $('.collapse').css('max-height',0); $('.accordion-toggle > i').removeClass('fa-minus'); $('.accordion-toggle > i').addClass('fa-plus'); //config this // if(temp){ $(this).children().removeClass('fa-minus'); $(this).children().addClass('fa-plus'); $(this).next().css('max-height','0'); }else{ $(this).children().removeClass('fa-plus'); $(this).children().addClass('fa-minus'); $(this).next().css('max-height','6em'); } }); 

 .accordion-toggle { background-color: #777; color: white; cursor: pointer; padding: 18px; width: calc(100% - 18px); border: none; text-align: left; outline: none; font-size: 15px; } .collapsed, .accordion-toggle:hover { background-color: #555; } .collapse { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background-color: #f1f1f1; } .container { max-width:100%; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="container"> <h2 class="accordion-toggle">Open Collapsible<i class="fa fa-plus pull-right"></i></h2> <div id="anyId" class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <h2 class="accordion-toggle">Open Section 1<i class="fa fa-plus pull-right"></i></h2> <div class="collapse"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>