display different image based on state of link

Question

I have a link that a user selects, to display a paragraph, once they select it, I want it to display a different image, initially the image will be a plus (+) sign, to visually communicate that it can be clicked to slide down the content to be seen, and once it is clicked, I want it to change to a minus (-) sign, so they can click and it will slide back up and disappear.

I've got the slideToggle down, I just need to plug in the image file path, based on the current state (display or hide) of the link.

Example jQuery and HTML:

<a href="#" class="slide-down">Click <img src="insert-filename-of-image"></a>

$(document).ready(function() {
 $('.slide-down').click(function() {
  $(".content-to-slide-down").slideToggle(100);
 });
});

All I need to do is put the appropriate image filename, path within the <img src="">

Any help is appreciated.

Answer 1

Possibly not the cleanest way of doing it, but this is what I have running on my site now:

$('.responseHeader').click( function(){
        if($(this).find('.plus').length)
        {
            var $expImg = $(this).find('.plus');
            $expImg.attr('src','/static/icons/minus_9x9.png');
            $expImg.addClass('minus');
            $expImg.removeClass('plus');
        }
        else
        {
            var $expImg = $(this).find('.minus');
            $expImg.attr('src','/static/icons/plus_9x9.png');
            $expImg.addClass('plus');
            $expImg.removeClass('minus');
        }
        $(this).parent().children('.responseBody').slideToggle(100);     
    });

Edit** Here is the relevant HTML for context:

<div id='responsePane'>


        <div class='response'>      
            <div class='responseHeader'>
                <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span>
                <span> <b>Adam Jones</b> </span>        
                <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div>
            </div>

            <div class='responseBody'>
                <span> <b>Response: </b></span>
                <span> Test Response </span>
            <br />
            </div>
        </div>

        <div class='response'>      
            <div class='responseHeader'>

                <span><img class='expanderImg plus' src='/static/icons/plus_9x9.png' alt='expand'>&nbsp Response By: </span>
                <span> <b>John Smith</b>&nbsp<img align='top' src='/static/icons/fmlogo_16x16.png' alt='Fi-Med'> </span>        
                <div class='responseDate' style='display:inline;width:100%;'><span> &nbsp&nbsp&nbsp&nbsp&nbsp<i>2010-06-15</i> </span></div>
            </div>
            <div class='responseBody'>

                <span> <b>Response: </b></span>
                <span> Test Response </span>
            <br />
            </div>
        </div>

Answer 2

$(document).ready(function() {
 $('.slide-down').click(function() {
  $(".content-to-slide-down").slideToggle(100);
  var img = $("img", this).attr("src");
  if( img == "plusimage-path") // or check the end of the path or similar
     $("img", this).attr("src", "minusimage-path");
  else
     $("img", this).attr("src", "plusimage-path");
 });
})

Answer 3

There's a few different ways of doing this. The easiest is probably to just use a callback.

$(document).ready(function() {
 $('.slide-down').click(function() {
  $(".content-to-slide-down").slideToggle(100, function () {
    if ( {{ whatever condition you can use to check }} ) {
      $('img').attr('src', {{ URL HERE }} );
    }
    else {
      $('img').attr('src', {{ OTHER URL HERE }} );
    }
  });
 });
});

Another option is to use .toggle()

$(document).ready(function() {
   $('.slide-down').toggle(function() { 
        $(this).slideDown();
        $('img#id_of_image_here').attr('src', 'URL to minus icon');
        // whatever else you want to happen on first click
     },
     function () {
        $(this).slideUp();
        $('img#id_of_image_here').attr('src', 'URL to plus icon');
        // whatever you want the other click, it will track state for you.
     }
   );
});