How to make a javascript down arrow go back up?

I have a little script that shows a div when an arrow is clicked. That arrow will also point down. However, when clicking the arrow to toggle it back up, the div hides 开发者_StackOverflow社区but the arrow stays down. Is there an easy way to make the arrow pop back up after being clicked again? Here's the current code:

<script language=javascript type='text/javascript'>
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->

</script> 
<script type="text/javascript">
   function changeImg(image_id, image_folder){
   document.getElementById(image_id).src = image_folder;
}
</script>

<a href="javascript:toggle_visibility('<? echo $row2['rfid']; ?>')" onClick="changeImg('image<? echo $i; ?>', '../images/arrow-down.png')"/><img src="../images/arrow-up.png" border="0" id="image<? echo $i; ?>"></a>

Thanks!

Create two classes in css file with two different images and toggel those two in your script.

function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       e.setAttribute("class", "class1");
       else
          e.style.display = 'block';
          e.setAttribute("class", "class2");
    }

here is the css code

class1{

  background-image:url('../Content/Images/image1.png');
}
class2{

  background-image:url('../Content/Images/image2.png');
}

Your problem lies here.

onClick="changeImg('image<? echo $i; ?>', '../images/arrow-down.png')"

When it is clicked it changes the picture to arrow-down.png, it doesn't swap them.

i suggest:

var image_prev = 0; //initialises the variable.
function changeImg(image_id, image_folder){
    if(!image_prev){//checks to see if the variable is not set to zero (! stands for not)
        document.getElementById(image_id).src = image_prev; // sets the source to the prev image.
        image_prev = 0;
    }else{
        image_prev = document.getElementById(image_id).src; //stores the link to the prev image
        document.getElementById(image_id).src = image_folder;
}

Hope this helps;

Else you could google a way to toggle images in JS :)