can't change image

can't change image

I can't change an image with jquery.

<html>

<head>
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<script language="javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
<!--
// Andy Langton's show/hide/mini-accordion - updated 18/03/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
   
   // choose text for the show/hide link - can contain HTML (e.g. an image)
   var showText='<img class="arrow" alt="Show" src="DownArrow.gif" style="border:0px;" />';
   var hideText='<img class="arrow" alt="Hide" src="UpArrow.gif" style="border:0px;" />';
   
   // append show/hide links to the element directly preceding the element with a class of "toggle"
   $('.toggle').prev().append(' '+showText);
   
   // hide all of the elements with a class of 'toggle'
   $('.toggle').hide();
   
   // capture clicks on the toggle links
   $('.toggleLink').click(function() {
      
      // toggle the display
      $(this).next('.toggle').slideToggle(400);
      
      // replace image with opposite arrow
      // ?? I need help here ??
      
      // return false so any link destination is not followed
      return false;
   
   });
});
//-->
</script>
<title>test</title>
</head>

<body>


<h3 class="toggleLink" style="cursor:pointer">Section one: a div with a paragraph</h3>
<div style="display: none;" class="toggle">
   <p>You can show/hide an entire div by giving it a class of &quot;toggle&quot;.
   <a href="#">Links</a> and other child elements will work fine too. The element
   directly before this one is a heading, so it gets a show/hide link appended.</p>
</div>


<h4 class="toggleLink" style="cursor:pointer">Section two: single paragraph</h4>
<p style="display: none;" class="toggle">A single paragraph can be hidden by giving
it a class of toggle too. I can't help but be impressed by how easy it is to use
jquery - even for someone with limited programming and javascript experience like
me. Again, the preceding element is a heading.</p>


<p class="toggleLink" style="cursor:pointer">Now: a list</p>
<ul style="display: none;" class="toggle">
   <li>You can even hide a list </li>
   <li>Just give the &lt;ul&gt; the toggle class</li>
   <li>This time the preceding element is a paragraph</li>
</ul>

</body>

</html>


Down arrow:
Image
Up arrow:
Image