How to toggle two images onClick

Question

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 jQuery with the following code:

$(this).attr('src','../images/expand.gif');

Problem is, I don't know how to make it go other way around, when i click on the node again :)

possible duplicate of [jQuery toggle to change image](http://stackoverflow.com/questions/1062731/jquery-toggle-to-change-image) — EdChum, Mar 13 '13 at 07:16

score 8 · Accepted Answer · answered Mar 12 '13 at 18:08

8

This should work:

<style>
.expand{
    content:url("http://site.com/expand.gif");
}
.collapse{
    content:url("http://site.com/collapse.gif");
}
</style>

<img class="expand">
<script>
//onclick code
$('img.expand').toggleClass('collapse');
</script>

answered Mar 12 '13 at 18:08

Matt

5,315
1
30
57

Can you lpease tell me how to do this part, when i want to do it locally ( so no URL in css) – Mar 12 '13 at 18:21
Try using content:url('./images/expand.gif'); – Matt Mar 12 '13 at 18:22

score 3 · Answer 2 · 2013-03-12T18:11:26.190

3

Look for jquery function toggleClass :)

http://jsfiddle.net/Ceptu/

Html:

<div id="box">

    Hello :D

</div>

Jquery:

$("#box").click(function () {
    $(this).toggleClass("red");
});

Css:

#box {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.red {
   background-color: red !important;
}

Remember that !important is realy important!!!

Lots of ways to do this :D

edited Mar 12 '13 at 18:11

answered Mar 12 '13 at 18:04

Happy i can help, best way with images bigger than 25x25 is loading the image before you call him to show, show but him offscreen: Meaning using postion and left:-1000px; – Mar 12 '13 at 18:44

score 1 · Answer 3 · answered Mar 12 '14 at 16:20

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

score 0 · Answer 4 · answered Mar 12 '13 at 18:18

0

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

answered Mar 12 '13 at 18:18

Neophile

1,519
12
15

How to toggle two images onClick

4 Answers4

Linked