title: Rotate an image 180 degrees on click with jquery with animation
body: <p>I'm making a drop down navigation and I would like to use an arrow that rotates to toggle it.</p>
  
  <p>I have this <a href="https://jsfiddle.net/jaUJm/39/" rel="noreferrer">https://jsfiddle.net/jaUJm/39/</a></p>
  
  <pre><code>$(document).ready(function() {
  $( ".toggle" ).click( function() {
      $("#image").css({'transform': 'rotate(-180deg)'});
  });
  });
  </code></pre>
  
  <p>I'm just not sure how to make it reset, as in, complete the rotation so it's pointing down again when it's clicked the second and subsequent times.</p>
  
  <p>Maybe a .flip class with </p>
  
  <p><code>.flip { transform: rotate(-180deg);}</code></p>
  
  <p>and use an <code>if()</code> and <code>addClass()/removeCLass()</code>?</p>
  
  <p>Thank you!</p>