title: Show/Hide Text Every Time An Arrow Is Clicked
body: <p>I need help showing/hiding text on a button click (specifically an arrow). I have a block of text that I have hidden and I need to slide it down in a time consistent with the arrow rotating 180 degrees. I also want it to do this only for the post above the arrow that was clicked. The solution I have come up with in this <a href="http://jsfiddle.net/8obybt1d/1/" rel="nofollow">fiddle</a> has many problems.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>$(function () {
      var angle = -180,
          height = "100%";
      $(".down-arrow").click(function () { 
          $(".down-arrow").css({
              '-webkit-transform': 'rotate(' + angle + 'deg)',
              '-moz-transform': 'rotate(' + angle + 'deg)',
              '-o-transform': 'rotate(' + angle + 'deg)',
              '-ms-transform': 'rotate(' + angle + 'deg)',
          });
  
          $(".blog-post").animate({
              'height' : height
              });
          angle -= 180;
          height = "50px";
      });
  }); 
  </code></pre>
  
  <p>And these are the issues I am having:</p>
  
  <ol>
  <li>It slides down way too fast
  <li>Once it slides back up it won't slide down again.
  <li>It does it for every post
  </ol>