Change Font Awesome Icon with Javascript - Expand/Collapse Accordion

Question

I have an accordion that can expand collapse. I set up some FontAwesome icons to help illustrate when it's open and closed - however, I can't seem to get it to change icons.

I was basing this knowledge off other StackOverflow posts that I saw - but for some reason I can't seem to get mine to work. If I had to guess I'm definitely missing the ball with jQuery. I struggle there, so I'm assuming I'm not selecting the right element.

I put just the chunk of code for the accordion into a JSFiddle: https://jsfiddle.net/ehkv99h9/18/

$(this).find($(".fa")).removeClass('fa-caret-right').addClass('fa-caret-down');

is what I think is tripping me up (as seen line 14 in my jsfiddle - I commented out for now since it wasn't working)

I tried writing some stuff to console.log to help determine if I was selecting the right part in my code, but I couldn't figure it out unfortunately.

What would I need to change in order to get my caret to rotate to the down position when it expands?

(One note: I have a few arrows there, I was testing out different icons, but I think it would be the same "fa-caret-right"/"fa-caret-down" vs. "fa-angle-right"/"fa-caret-down").

Ok, you know that you're mixing vanilla js and jquery, right? — yaakov, Apr 05 '18 at 19:12
I think that would work too based on what I've read. I found something in a different post saying .toggleClass would work and then you can just do fa-rotate-90 (or whatever degrees). The thing I was struggling with was getting it to work. I tried a few different ways in my code with various selectors. I'm still learning jQuery so I'm assuming I definitely messed up somewhere. Is there an example you have of .toggleClass (if you reference my JSFiddle). If not I can keep trying, but I'm seemingly missing something. — robromo, Apr 05 '18 at 19:14
Right, so I looked at the fiddle, heavily modified it to use jquery, and found that the `.fa`s were being replaced with SVGs that didn't have the fa class. Presumably this is the way that FA now does icons, but it means that you can't modify them on the fly. — yaakov, Apr 05 '18 at 19:20
Ah gotcha! Thanks - yeah I tried inspecting it on my own and noticed it was commenting out the tags and replacing it with SVG's - the same as your noticed. I read it's part of the new version of FA. Was worried the implications were that I couldn't modify them on the fly - Thanks for confirming it. I'll try to keep doing some research and finding out if anyone else encountered this new way with SVG. — robromo, Apr 05 '18 at 19:25
What you can do is go back to the old version of FA - it's still offered. — yaakov, Apr 05 '18 at 19:26
Didn't even think of trying the old version - I'll look into that. I was curious anyway so started reading up on it: https://stackoverflow.com/questions/46210501/switch-between-icons-when-using-fontawesome-5-0-svg-framework?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa That post seems to have a few people offering up their approach/ideas. — robromo, Apr 05 '18 at 19:31

score 1 · Answer 1 · answered Apr 05 '18 at 20:11

You need to use the latest version of FA, the 5.0.9

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js"></script>

and jQuery 3.x

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

then you can use the example provided by the documentation:

https://fontawesome.com/how-to-use/svg-with-js

in the section "Support for dynamic changes"

$(this)
    .find('[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');

you can se the result in the fiddle: https://jsfiddle.net/0hkd2sor/3/

score 0 · Answer 2 · answered Apr 05 '18 at 19:25

You can add this code in onclick listener for toggle Class

if(this.classList.value.indexOf("fa-caret-right") > -1){
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-right");
}else
{
    this.classList.add("fa-caret-right");
    this.classList.remove("fa-caret-down");
}

Change Font Awesome Icon with Javascript - Expand/Collapse Accordion

2 Answers2