How to change Images with JavaScript?

I got a acordeon that works and only one at a time can be open. The arrow starts with down but if you click it, the icon changes to up. Now i tryed to make it with images because i dont like the possible icons. The thing is my JavaScript worked for icons but after trying I dont get how to use it with images.

Here my JavaScript

jQuery(document).ready(function () {
            $(".flip").click(function () {
                /*Alle anderen werden geschlossen und auf circle-down gestellt wärend der eigene circle-up gestellt wird oder falls er schon up ist auf circle-down.*/
                    $(".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>

If anybody tried the same thing allready, any help would be great :D