Trying To Change An Image On Click And Back Again

I am trying to toggle an image when a class is clicked. So far I have this (below) and it works to change my 'plus.png' to my 'minus.png' but I need it to change back to my 'plus.p

Solution 1:

You can add/remove a class to keep track of which image src you are using. Something like this:

$('label.tree-toggler, .yellow').click(function () {
    if ( $(this).parent().children('.yellow').hasClass('minus') ) {
        $(this).parent().children('.yellow').attr('src', 'img/plus.png').removeClass('minus');
    } else {
        $(this).parent().children('.yellow').attr('src', 'img/minus.png').addClass('minus');
    }     
});

You could also use a data attribute and do something similar:

$('label.tree-toggler, .yellow').click(function () {
    if ( $(this).parent().children('.yellow').data('current_src') == 'minus') {
        $(this).parent().children('.yellow').attr('src', 'img/plus.png').data('current_src', 'plus');
    } else {
        $(this).parent().children('.yellow').attr('src', 'img/minus.png').data('current_src', 'minus');
    }     
});

Using the data attribute would require initially setting data-current_src='minus' on the element.

Solution 2:

the way i will do it is...

$(document).ready(
    function() {
        $(".className").click(
             var imgPath = $("img").attr('src');
             if(imgPath === "+.png") {  // check against current path
                // change the path to - 
             } else {
                // change the path to +
             }

); } );

i didn't test it, but that's the idea

Solution 3:

I would recommend adding another class like .active or .shown through JQuery when you switch the image around. That way you could check the current state of the object you're querying.

The Jquery would probably look something like

$('label.tree-toggler, .yellow').click(function () {
   // If the active class is NOT applied
   if( !( $(this).parent().children('.yellow').hasClass('active') ) ) {
      // Apply it and change the image
      $(this).parent().children('.yellow').addClass('active').attr('src','img/minus.png');
   }
   else 
      $(this).parent().children('.yellow').removeClass('active').attr('src', 'img/plus.png');


});

What's happening here is the active class is being used to determine the state of the image displayed. When you click it, you'll change the image and apply the flag.

After every click the flag is checked and behaves accordingly. Hope that helps! I'm still new to S.O. =.="

Solution 4:

If you want to do it in JS, I suggest you to put :

• your initial image in src
• your alternative image in data-alternative

Like this :

<li>
    <label class="tree-toggler nav-header">Saftey and Emissions</label>
    <img class="yellow" src="img/plus.png" data-alternative="img/minus.png"><hr></hr>
    <ul class="nav nav-list tree">
        <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
        <li><a href="#" id="secLink">link<img class="yellow" src="img/chevron-right.png"></a><hr></hr></li>
    </ul>
</li>

And the JS :

<script type="text/javascript">
$(document).ready(function () {
    $('label.tree-toggler, .yellow').click(function () {
        var yellow = $(this).parent().children('.yellow').first();
        var alternative = yellow.data('alternative');
        yellow.data('alternative', yellow.attr('src'))
              .attr('src', alternative );
    });
});

</script>

Solution 5:

Did you see the toggle function of Jquery?

http://api.jquery.com/toggle/