title: jQuery slidetoggle rotation animation
body: <p>I have problematic jQuery function. I want to have a slidetoggle which will animate rotation of an arrow next to slide toggle text. Now arrow rotation animation is played only the first time ant also its not animating rotation back (while is slidetoggle closing)</p>
  
  <p>I am starting with web programming and I cant find answer for my question so i will be glad for every help.</p>
  
  <p>That arrow is not rotating back while is the list closing</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(1.2.html).ready(function() {
    $("click").click(function() {
      $("ul").slideToggle("slow");
      $(".arrow").animate({
        deg: 180,
      }, {
        speed: "slow",
        step: function(now) {
          $(this).css({
            transform: 'rotate(' + now + 'deg)'
          })
        }
      });
    })
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.arrow {
    float: right;
  }
  
  p {
    float: left;
  }
  
  ul {
    display: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="all"&gt;
    &lt;div class="click"&gt;
      &lt;p&gt;Toggle&lt;/p&gt;
      &lt;img class="arrow"&gt;
    &lt;/div&gt;
    &lt;ul&gt;
      &lt;li&gt;hidden1&lt;/li&gt;
      &lt;li&gt;hidden2&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>