How To Toggle Two Images Onclick

I'm making a collapsible treeView. I made it all, I just need my + and - icons to toggle whenever they are clicked. I did the part when I change an icon from + to -, on click, with

Solution 1:

This should work:

<style>.expand{
    content:url("http://site.com/expand.gif");
}
.collapse{
    content:url("http://site.com/collapse.gif");
}
</style><imgclass="expand"><script>//onclick code
$('img.expand').toggleClass('collapse');
</script>

Solution 2:

I wanted to do this without making classes. Inside your click event function, you could do something like this:

if($(this).attr('src') == '../images/collapse.gif')
   $(this).attr('src', '../images/expand.gif');
else
   $(this).attr('src', '../images/collapse.gif');

Solution 3:

add plus as a default img src then define a minus-class to change the image source to minus image

$("selector_for_your_link").click(function () {
      $(this).toggleClass("minus-class");
    });