Jquery click function only gets called once

Question

I am trying to use JavaScript to implement a functionality. I have an icon on my html page (div tag). and I want to implement the functionality that when I click on it once it changes to another icon. But the condition it when i click on that changed icon, it should revert back to the original icon.

Now, here is the problem, the icon changes to another icon on first click but it does not revert back to original icon on second click. Actually, its jquery's click function is not getting called when i click it second time.

any ideas?

Following is the code:

$("#volume-slide-img").hide();

$("#volume-icon").click(function() {
    if (document.getElementById('volume-slide-img').style.display == 'none') {
        $("#volume-slide-img").show();
    }
    else {
        $("#volume-slide-img").hide();
    }
});

Answer 1

You can make your code a lot simpler. Try this:

$('#volume-slide-img').hide();
$('#volume-icon').click(function(){
    $('#volume-slide-img').toggle();
});

Answer 2

I think what you want to do is toggle the class on #volume-icon when it is clicked.

I mocked it up on jsFiddle. When the icon is clicked, toggleClass will do what it says, toggle a class (if it is applied, unapply it, if not, apply it). The class can be used to set the icon.

I might be missing something though...you say "I have an icon" and you want to do something "when I click on it" but your code sample seems to change something else when the icon is clicked.

Answer 3

@Don Zacharias nailed it, but I found some pretty volume icons so here's a similar approach to his but with background images.

http://jsfiddle.net/pxfunc/xbUQZ/

HTML:

<div id="volume-icon" title="click to toggle!"></div>

CSS:

#volume-icon {
    width:256px;
    height:256px;
    cursor:pointer;
    background-image:url('http://icons.iconarchive.com/icons/icons-land/vista-multimedia/256/Volume-Hot-icon.png')
}
#volume-icon.mute {
    background-image:url('http://lh3.ggpht.com/_uU5cLRayUdQ/S48MYDVnjlI/AAAAAAAADik/GWYRNg06mhE/Volume-Normal-Red-icon.png');
}

jQuery:

$('#volume-icon').click(function() {
    $(this).toggleClass('mute');
});