title: Change image onclick
body: <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>