Question

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 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!

Answer 1

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');
}