Change Font Awesome Icon Only

Question

I am trying to change the icon from chevron-down to chevron-up when clicked. Currently, it shows "Categories" and "Hide" when clicked. I would like to have it say "Categories" the whole time. Is that possible?

Here is the code:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
    <i class="fa fa-chevron-down"></i> Categories
</h1>

<div id="showhide" style="display:none;">
        <ul>
            <li><a href="#">Hello World</a>
            </li>
        </ul>
</div>

JS

function arata_ascunde(h1) {
    var x = $('#showhide');
    $(h1).find('i').remove();
    if ($(h1).text().trim() == 'Categories') {
        $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Hide ');
        x.fadeIn();
    }
    else {
        $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
        x.fadeOut();
    }
}

CodePen: https://codepen.io/chadwicked123/pen/porRoOq

Answer 1

Your "if condition" is on something that can't be detected if it will be the same in all conditions. So it's better to change your condition to something more specific, like the tag's class. like this :

function arata_ascunde(h1) {
    var x = $('#showhide');
    if ($(h1).find('i').hasClass('fa-chevron-down')) {
        $(h1).find('i').remove();
        $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Categories');
        x.fadeIn();
    } else {
        $(h1).find('i').remove();
        $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories');
        x.fadeOut();
    }
}

I changed a few things to make your result more beautiful. This code still can be improved (I'm not a front-end developer).

Answer 2

I used basic javascript and some logic to change the HTML based on a class

Here's the codepen for it - Link

Here's the edited JS file :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt">
     Categories<i class="fa fa-chevron-down"></i>
</h1>

<div id="showhide" style="display:none;">
        <ul>
            <li><a href="#">Hello World</a>
            </li>
        </ul>
</div>

and the edited JS file

function arata_ascunde(h1) {
    var x = $('#showhide');
    $(h1).find('i').remove();
    if (document.querySelector("h1").classList.contains("down")) {
        $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Categories ');
      document.querySelector("h1").classList.remove("down")
        x.fadeIn();
    }
    else {
        $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories ');
      document.querySelector("h1").classList.add("down")
        x.fadeOut();
    }
}