My images refuse to work

Question

I am working on a website, so that when you click an arrow a list is either show or hidden. I am also testing out JQuery.

As such, I already have this script:

$(document).ready(function() {
    $('img.KeikkaNuoli').click(function() {
        if(this.src == "images/Arrow.png")
        {
            this.src = "images/Arrow2.png";
        }
        else
        {
            this.src = "images/Arrow.png";
        }
    });
});

Idea is, that when the user clicks the image, AKA arrow, it flips down and shows the list. However, as it happen, at the moment this script does not work. Image does not change between two. if I set if statement as if(this.src = "images/Arrow.png") then it will work the first time, but refuses to work the second time.

Answer 1

In some browsers the this.src variable becomes the fully qualified url.

Try this instead:

$(document).ready(function() {
    $('img.KeikkaNuoli').click(function() {
        if(this.src.indexOf("images/Arrow.png") !== -1)
        {
            this.src = "images/Arrow2.png";
        }
        else
        {
            this.src = "images/Arrow.png";
        }
    });
});