jQuery to toggle content, having problems changing image on toggle

Question

Im trying to implement a jQuery toogle div. When you click the image (image of a down arrow) the content will slide down. Now when this happens the image is SUPPOSED to now show an arrow pointing up (but it just goes blank), clicking the up image should slide the content back up and out of view.

    $("img.toggle1").toggle(function(e){
 alert('change to reactivate');
     $(this).attr("src","images/down.png")
 }, function(e) {
 alert('change to deactivate');
     $(this).attr("src","images/up.png")
              // hide a row after acknowledgement

 }); 

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
 // (a little sooner than page load)
  $('#slickbox').hide();
 // shows the slickbox on clicking the noted link
  $('a#slick-show').click(function() {
 $('#slickbox').show('slow');
 return false;
  });
 // hides the slickbox on clicking the noted link
  $('a#slick-hide').click(function() {
 $('#slickbox').hide('fast');
 return false;
  });
 // toggles the slickbox on clicking the noted link
  $('a#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
 $("img.toggle1").toggle();
 return false;
  });
});

Here is the HTML im using...

<a href="#" id="slick-toggle"><img src="images/down.png" alt="More" width="21" height="14" border="0" class="toggle1" /></a>

Answer 1

See this please.