Question

I am trying to check the image and replace the image for my expand and collapse <div> but i cant able to find the solution.

html code:

<h4 id="expanderHead">Virtual Room <span id="expanderSign">+</span></h4>
<div id="expanderContent" style="display:none">
    content ... content...
</div>

jquery:

$(document).ready(function(){
   $("#expanderHead").click(function(){
      $("#expanderContent").slideToggle();
      if ($("#expanderSign").text() == "+"){
          $("#expanderSign").html("-")
      }
      else {
          $("#expanderSign").text("+")
      }
    });
});

Here, instead of + and – i have to place <img src="" alt=""/> .

Thank you.

Answer 1

HTML

<h4 id="expanderHead">Virtual Room <span id="expanderSign"><img src="plus-sign.png" /></span></h4>
<div id="expanderContent" style="display:none">
    content ... content...
</div>​

EDITED (Added better jQuery Version)

jQuery New Version

$(document).ready(function(){

   $("#expanderHead").click(function(){

       $("#expanderContent").slideToggle();

       var plusImg = "http://cdn2.iconfinder.com/data/icons/diagona/icon/16/129.png";
       var minusImg = "http://cdn2.iconfinder.com/data/icons/diagona/icon/16/130.png";        
       $this = $("#expanderSign img");            

       if( $this.attr('src') == plusImg ) { $this.attr('src', minusImg);} 
       else { $this.attr('src', plusImg); }

   });
});

SEE LIVE DEMO