title: Rotate Arrow Image on Toggle Hide Div jQuery Script
body: <p>I have a script that works for the slider.  But now I need to rotate an arrow image with the HTML like this:</p>
  
  <p><a href="http://jsfiddle.net/nicorellius/gsDVS/" rel="nofollow noreferrer">http://jsfiddle.net/nicorellius/gsDVS/</a></p>
  
  <p>The image I'm using is currently a background image on the class, <code>byline</code>.</p>
  
  <p>The jQuery script is here:</p>
  
  <pre><code>// expanding, collapsing div script
  $(document).ready(function() {
      $(".toggle-content").hide();
      $(".byline").click(function() {
          //$(this).attr("id", "down-arrow");
          var $next = $(this).next(".toggle-content");
          $(".toggle-content").not($next).slideUp();
          $next.slideToggle(500);
          //$next.attr("id", "");
      });
  });
  </code></pre>
  
  <p>This works to change the image from left to down, eg, <code>id</code> from empty to <code>down-arrow</code>.  But when I click to close the slider, the image stays as left.  I'm getting confused on how to rework this script to change the image back.  The images currently are separate, one facing left and the other facing down.  I should probably use a single image sprite, but I'm just trying to get this figured out first.</p>
  
  <p>I read this post and this is a good idea, but maybe a bit too complex for me right now to implement:</p>
  
  <p><a href="https://stackoverflow.com/questions/13999321/rotate-image-on-toggle-with-jquery">Rotate image on toggle with jQuery</a></p>
  
  <p>Thanks.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I should note that my page in question here is a bit different than the fiddle I showed:</p>
  
  <pre><code>&lt;div class="byline"&gt;
      &lt;h4 class="crp-h"&gt;Analyze&lt;/h4&gt;
      &lt;p class="crp-p"&gt;Things are written here&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="toggle-content"&gt;
      &lt;ul class="crp-list"&gt;
          &lt;li&gt;Statistical&lt;/li&gt;
          &lt;li&gt;Robust&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Thanks One Trick Pony... this thing is almost working except for one thing.  The rotation only works when the <code>this</code> <code>div</code> is clicked.  When the <code>non-this</code> <code>div</code> is clicked the other <code>div</code>s hide but the image remains un-rotated:</p>
  
  <pre><code>.byline{
    position:relative;     /* required */
  }    
  
  
  .byline:after {
      transform: rotate(-90deg);
      content: '';           /* required */
      position:absolute;     /* required */
      width: 14px;           /* required, width of your arrow */
      height: 14px;          /* required, height of your arrow */
      right: -20px;          /* required, negative width + some padding */
      top:0;                 /* required */
      background: url('your/arrow/image/here.png') no-repeat;
  }
  
  .byline.exp:after {
      transform: rotate(0deg);
  }
  </code></pre>
  
  <p>The new jQuery is here:</p>
  
  <pre><code>// expanding, collapsing div script
  $(document).ready(function() {
      $(".toggle-content").hide();
      $(".byline").click(function() {
          var $next = $(this).next(".toggle-content");
          $(".toggle-content").not($next).slideUp();
          $next.slideToggle(500);
          $(this).toggleClass('exp');
      });
  });
  </code></pre>
  
  <p>The fiddle showing this is here:</p>
  
  <p><a href="http://jsfiddle.net/nicorellius/7AYjj/" rel="nofollow noreferrer">http://jsfiddle.net/nicorellius/7AYjj/</a></p>