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).

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();
    }
}