Instead of using Fontawesome Unicode, how can we use Fontawesome classes to create Accordions with icons?

Question

Currently I have this accordion that expands and collapses: https://jsfiddle.net/cliffeee/a5uxgkmt/15/ .

I want to use fontawesome to create the icons for the accordion. Right now, I am using Fontawesome unicodes(f067 , \f068). However, I want to use Fontawesome classes instead such as this: https://fontawesome.com/icons/plus?style=solid
https://fontawesome.com/icons/minus?style=solid

I am wondering where in my jquery or cshtml can I add the fontawesome classes?

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

what you are doing is all that FontAwesome does behind the scenes. To achieve what you are looking for you would have to combine the CSS into a single file and reference to FA classes from your, this is made easier with LESS or SASS. Otherwise you would have to do this in JS. What is your concern with using unicode? — Kyle, Sep 11 '19 at 22:22
Then you will probably have to go the JS route like in the answer provided below. If you want to do in pure CSS then stick what what you have and add the rest of the styling for the particular weight etc of FA you want to use. — Kyle, Sep 11 '19 at 22:28
The problem with using unicode is that, the unicode is the same for Solid and PRO icons . For example: Solid plus: https://fontawesome.com/icons/plus?style=solid Regular plus : https://fontawesome.com/icons/plus?style=regular Both of these have the same unicode ( f067), but I want to use Regular PRO but I am getting Solid icon instead. — , Sep 11 '19 at 22:29
@Cliff look here: https://stackoverflow.com/questions/49766325/fontawesome-5-unicode — Mischa, Sep 11 '19 at 22:32
Thank you @Mischa for pointing me to that. I think I have tried modifying the font weight, but it didn't work. I will try it again. — , Sep 11 '19 at 22:39

score 0 · Answer 1 · answered Sep 11 '19 at 22:25

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>

I ran your code snippet and noticed that when collapsing an accordion the icons don't toggle correctly. For example, If I expand accordion 1, and then I expand accordion 2, accordion 1 get collapsed but the icon remains as minus. — , Sep 12 '19 at 02:39
Aah ok .... yes i didnt really read your code in detail .... i just searched the points where collapsed is toggled and added toggle "fa-plus" <-> "fa-minus" but i think you can figure out the rest for yourself from here on .... and btw. you dont need to reinvent the wheel here there are many good solutions for collapsible/accordion components out there. I think the most popular is bootstrap: https://getbootstrap.com/ — Mischa, Sep 12 '19 at 08:14

Instead of using Fontawesome Unicode, how can we use Fontawesome classes to create Accordions with icons?

1 Answers1