除了使用 Fontawesome Unicode，我们如何使用 Fontawesome 类来创建带有图标的手风琴？

Question

目前我有一个可以展开和折叠的手风琴：https://jsfiddle.net/cliffeee/a5uxgkmt/15/。

我想使用 fontawesome 为手风琴创建图标。现在，我正在使用 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>