JavaScript to toggle icons on Accordion when they expand and collapse

Question

I have an accordion which expands and collapses. Here is the code:https://jsfiddle.net/96jqo3ba/2/ . I would like to use FontAwesome icon classes to represent when an accordion tab expands and collapses. Here are the two fontAwesome classes that I want to use:

<i class="fas fa-plus" /i>
<i class="fas fa-minus" /i>

In the cshtml, I have added the <i class="fas fa-plus"/i>. My question is, in my Jquery script, how do I toggle between <i class="fas fa-plus" /i> and <i class="fas fa-plus" /i> when an accordion tab expands and collapses ?

Jquery:

var coll = document.getElementsByClassName("accordion-toggle");
for (var i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function(evnt) {
    const currClassList = evnt.currentTarget.classList;
    if (currClassList.contains('collapsed')) {
        evnt.currentTarget.classList.remove("collapsed");
        var content = evnt.currentTarget.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");
      var content = this.nextElementSibling;
      if (content.style.maxHeight){
        content.style.maxHeight = null;
      } else {
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  });
}

Answer 1

Based on your current setup, you could add both the fa-plus and fa-minus elements in the markup next to each other and then the following css to hide / show them based on if the collapsed class is present:

HTML:

<h2 class="accordion-toggle"><i class="fa fa-plus pull-right"></i><i class="fa fa-minus pull-right"></i><button>
Open Collapsible
</button></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"><i class="fa fa-plus pull-right"></i><i class="fa fa-minus pull-right"></i><button>
Open Section 1
</button></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>

CSS:

.accordion-toggle {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  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;
}

.fa-minus {
  display: none;
}

.collapsed .fa-minus {
  display: block;
}

.collapsed .fa-plus {
  display: none;
}