title: jQuery slide toggle change image onclick
body: <p>I'm using .slideToggle to show/hide content when an image is clicked, it changes once when the content shows but doesn't change back to the original image when its clicked again to hide the content, not quite sure what I'm missing here. Any help much appreciated.</p>
  
  <p>the jQuery:</p>
  
  <pre><code>$(document).ready(function() {
  
      $('#toggle1').click(function() {
          $('.toggle1').slideToggle('1100');
          $("#bg").attr('src',"images/box-arrow-down.jpg");
          return false;
  
      });
  </code></pre>
  
  <p>the HTML:</p>
  
  <pre><code>&lt;div class="box"&gt;
    &lt;div style="width:1100px;height:100px;margin-left:40px;"&gt;
      &lt;span style="float:left;"&gt;&lt;a href="#" id="toggle1"&gt;&lt;img src="images/box-arrow-up.jpg" height="16" width="17" alt="arrow" id="bg" style="margin-top:40px;" /&gt;&lt;/a&gt;&lt;/span&gt;
    &lt;/div&gt;
    &lt;div class="toggle1" style="display:none;width:1100px;padding:0px;margin-left:8px;"&gt;
    &lt;div class="boxTime"&gt;09:00&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>