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

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