javascript - 除了使用 Fontawesome Unicode，我们如何使用 Fontawesome 类来创建带有图标的 Accordion ？

Question

目前我有这个可以展开和折叠的 Accordion :https://jsfiddle.net/cliffeee/a5uxgkmt/15/ .

我想使用 fontawesome 为 Accordion 创建图标。现在，我正在使用 Fontawesome unicodes(f067 ,\f068)。但是，我想改用 Fontawesome 类，例如: https://fontawesome.com/icons/plus?style=solid
https://fontawesome.com/icons/minus?style=solid

我想知道我可以在我的 jquery 或 cshtml 中的什么地方添加 fontawesome 类？

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

Answer 1

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";
      }
    }
  });
}

.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%;
}

<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>