HTML Code for Font Awesome Plus/Minus Icon Switch

Question

I manage a knowledge base using Adobe RoboHelp. Very rarely need to use HTML over the standard editor. I want to have a dropdown that has the font awesome icon fa-plus-circle turn into the fa-minus-circle when the user clicks the text.

I am struggling with the HTML code to turn the plus icon into the minus icon when clicked. Any help would be much appreciated!

Please post the code you have so far. – Sub 6 Resources Nov 17 '16 at 01:42 — Sub 6 Resources, Nov 17 '16 at 01:42

score 0 · Answer 1 · answered Nov 17 '16 at 02:01

Something like this will work. But using jQuery would be easier if you could.

<script>
function changeIcon() {
    var isChecked = document.getElementsByClassName('fa-minus');
    if(isChecked.length > 0) document.getElementById('plus').className='fa fa-plus';
    else document.getElementById('plus').className='fa fa-minus';
}
</script>

<i class="fa fa-plus" id="plus"></i><div onclick="changeIcon();">Click Me</div>

Hard to determine the way that best suits you without code.

HTML Code for Font Awesome Plus/Minus Icon Switch

1 Answers1