Change image onclick
<p>I want to display a different image when clicking on my image. A demo is <a href="https://jsfiddle.net/sj7o9x58/" rel="nofollow">here</a>. When clicking on the image the image should change to an arrow pointing up instead of pointing down. How do I do that?</p>

<p>Here is my code:</p>

<pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;td&gt;
    &lt;div id="flip"&gt;&lt;img src="http://i.imgur.com/YCf5zYt.png"&gt;&lt;/div&gt;
    &lt;div id="panel" style="display: none;"&gt;&lt;p&gt;&lt;i&gt;&lt;strong&gt;CONTENT&lt;/strong&gt;&lt;/i&gt;&lt;/p&gt;
    &lt;/div&gt;
&lt;/td&gt;
</code></pre>

<p>JS</p>

<pre><code>var toggled = false;
$("img").click(function () {
    if (!toggled) {
        $(this).css("", "url(http://i.imgur.com/YCf5zYt.png)");
        toggled = true;
    } else {
        $(this).css("", "url(http://i.imgur.com/V4fKMWS.png)");
        toggled = false;
    }

    $("p").slideToggle();
})
$(document).ready(function () {
    $("#flip").click(function () {
        $("#panel").slideToggle("slow");
    });
});
</code></pre>