how to change font awesome icons on click? - html

Question

I'm use Font awesome icons in my vBulletin style and i want to change the (minus) icon to (plus) when click ! Is there a way to do it ?
<a rel="nofollow" style="float:left" href="#" onclick="return
toggle_collapse('forumbit_$forumid')">
<span style="color:#24356C;" >
<i class="fa fa-minus-square-o fa-2x"></i>
</span>
</a>

Answer 1

I think this question(and the answer) can help you do what you want :)
Change an element's class with JavaScript

Answer 2

Assign an id to your icon, e.g.
<i class="fa fa-minus-square-o fa-2x" id="i-1"></i>
The id can be dynamic value like 'i-$forumid' depend on how you generate your html.
In your toggle_collapse('forumbit_$forumid') function,
Add
var e = document.getElementById('i-1');
if (e.classList.contains('fa-plus-square-o')) {
e.classList.toggle('fa-plus-square-o');
} else {
e.classList.add('fa-plus-square-o');
}
or
function toggle_collapse(forumID) {
...
var iconID = 'i-' + formumID.replace('forumbit_','')
var e = document.getElementById(iconID);
if (e.classList.contains('fa-plus-square-o')) {
e.classList.toggle('fa-plus-square-o');
} else {
e.classList.add('fa-plus-square-o');
}
...
}