How to change Images with JavaScript?

I have an accordion that works and only one image at a time can be open. The arrow starts with down but if you click it, the icon changes to up. I tried to make it with images because I don't like the possible icons. The thing is my JavaScript worked for icons but, after trying, I don't get how to use it with images. I tried two images of mine that showed up. flip-up and flip-down.

My jQuery

jQuery(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
        if($("i",this).hasClass('fa-chevron-circle-down')){
            $(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
            $("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up");
        }
        else{
            $("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
        }
    });
});

and the HTML

<div class="flip shadow-box col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder">
    <i class="fa fa-chevron-circle-down"></i>
</div>