How to find and replace image inside <div> using jquery?

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.

So what is the error you are getting? or actually what is the issue? — Mahesh KP
– Mahesh KP, Commented Aug 3, 2012 at 6:20
Just to mention but it is probably best to have the image already on the page, then just show it when you want to. This will stop the "flash" whilst the image loads when clicking the + — Undefined
– Undefined, Commented Aug 3, 2012 at 6:22
Also here you are checking like $("#expanderSign").text()=="+", so when the image came you need to check the whole image tag, i think it is not a good method.. — Mahesh KP
– Mahesh KP, Commented Aug 3, 2012 at 6:25
@mahesh : sorry my question is how to do? Actually i tried with attr() and innerHTML but its not working. — RAN
– RAN, Commented Aug 3, 2012 at 6:26

Ahsan Khurshid · Accepted Answer · 2012-08-03 07:24:44Z

7

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

edited Aug 3, 2012 at 7:24

answered Aug 3, 2012 at 6:24

Ahsan Khurshid

9,4671 gold badge35 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ahsan Khurshid Over a year ago

@Ran: Updated my answer with a better jQuery implementation. Discard the old suggestion. Thanks

Mukilarasan · Accepted Answer · 2012-08-03 07:07:55Z

0

$(document).ready(function(){

       $("#expanderHead").click(function(){
      $("#expanderContent").slideToggle();
      if ($("#imgId").attr('src') == "d2.png"){
          $("#imgId").attr("src","d1.png")
      }
      else {
          $("#imgId").attr("src","d2.png")
      }
    });
});

    <h4 id="expanderHead">Virtual Room <img id='imgId' src='d2.png' /></h4>
<div id="expanderContent" style="display:none">
    content ... content...
</div>

answered Aug 3, 2012 at 7:07

Mukilarasan

7571 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to find and replace image inside <div> using jquery?

2 Answers 2

EDITED (Added better jQuery Version)

SEE LIVE DEMO

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

EDITED (Added better jQuery Version)

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related