toggle image using jquery

Question

I am having an img inside <p> tag and if I click the img or the <p> it needs to be toggled and the img should changed.

I have done it by adding jQuery(this).attr("src", "img/hide.png"); but the img is not changing can any one suggest me the right path.

Here is my script:

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
        });
      });
</script>

This is my CSS:

.layer1 {
margin: -5px;
padding: 0px;
width: 860px;
}

This is my markup:

<div class="layer1">
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
<p class="heading"><img src="img/show.png" alt="" style="margin:0 5px 0 0;" /></p>
<div class="content"></div>
</div>

is it ok if you change the image as background image of .heading? so you can play .heading and .heading.hide and just toggleClass — bondythegreat
– bondythegreat, Commented Jan 12, 2012 at 10:39
@bondythegreat-Yes I have tried it before but it dosent look so good as the margins are problem for it and unable to set for that. — coder
– coder, Commented Jan 12, 2012 at 10:51
you can set the width&height of the container in .heading and just play a bit with background-position in css.. it's just my 2 cents. — bondythegreat
– bondythegreat, Commented Jan 12, 2012 at 10:59

Jonathon Bolster · Accepted Answer · 2012-01-12 10:50:26Z

2

jQuery(this).attr("src", "img/hide.png");

In this context this will refer to the .heading (the p tag). You'll have to dig down a little deeper to reference the image:

jQuery(this).find('img').attr("src", "img/hide.png");

Here's a jsFiddle to show:

http://jsfiddle.net/jonathon/yBFWM/

Edit I missed the content toggling bit of the question.

I've added a bit so that it will know what the 'active' content area is. Then when you click an image, it will hide the active content area and display the current. I also added a bit so the click handler wont toggle the content if it's already selected.

jQuery(".heading").click(function() {
    var $this = $(this),
        $contentArea = $this.next('.content');

    if (!$contentArea.hasClass('active')) {
        $(".content.active").slideToggle(500).removeClass('active');
        $contentArea.slideToggle(500).addClass("active");

        $this.find('img').attr("src", "http://www.google.com/images/icons/ui/doodle_plus/doodle_plus_google_logo_on_grey.gif");
    }
});

edited Jan 12, 2012 at 10:50

answered Jan 12, 2012 at 10:38

Jonathon Bolster

16k3 gold badges45 silver badges47 bronze badges

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

3 Comments

coder Over a year ago

@JonathonBolster-Thank you so much for the quick reply and this is what I need but agin when I toggle it the img is not changing so how do I need to replace that.

Jonathon Bolster Over a year ago

@Kiran Sorry - I missed that bit! Please have a look at my edit (and the jsFiddle)

coder Over a year ago

@JonathonBolster-No problem and I have looked at your fiddle it just slides sown and changes the img but if again I click the header the img should change.

Dau · Accepted Answer · 2012-01-12 10:40:44Z

1

$("p").mousedown(function(){
    $(this).find('img').attr('src','img/img1.png');
})

$("p").mouseup(function(){
    $(this).find('img').attr('src','img/img2.png');
})

$("img").mousedown(function(){
    $(this).attr('src','img/img1.png');
})

$("img").mouseup(function(){
    $(this).attr('src','img/img2.png');
})

answered Jan 12, 2012 at 10:40

Dau

8,9204 gold badges25 silver badges49 bronze badges

Comments

Simon · Accepted Answer · 2012-01-12 10:45:41Z

1

Did you include the line jQuery(this).attr("src", "img/show.png") in the click-handler defined by jQuery(".heading").click()? In this case, your code cannot work because this refers to the <p class="heading">, not to the image.

Simply change the line to

jQuery('img',this).attr("src", "img/show.png")

edited Jan 12, 2012 at 10:45

answered Jan 12, 2012 at 10:40

Simon

3,5391 gold badge21 silver badges21 bronze badges

Comments

bondythegreat · Accepted Answer · 2012-01-12 10:53:26Z

0

<script type="text/javascript">
    jQuery(document).ready(function () {
        var imgShow = 'img/show.png';
        var imgHide = 'img/hide.png';
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            jQuery(this).next(".content").slideToggle(500);
            if (JQuery(this).find("img").attr('src') == imgShow ) {
                JQuery(this).find("img").attr('src', imgHide);
            } else {
                JQuery(this).find("img").attr('src',imgShow);
            }
        });
      });
</script>

answered Jan 12, 2012 at 10:53

bondythegreat

1,40912 silver badges21 bronze badges

1 Comment

coder Over a year ago

@bondythegreat-It's not changing the img.

Collectives™ on Stack Overflow

toggle image using jquery

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related