CODEWITHSUNDEEP
javascripthtml
Zack Tanner
Zack Tanner

Reputation: 2590

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

Upvotes: 2

Views: 2032

Answers (2)

Jayantha Lal Sirisena
Jayantha Lal Sirisena

Reputation: 21376

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

Upvotes: 2

FraserK
FraserK

Reputation: 302

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 :)

Upvotes: 1

Related Questions