Question

I am having a simple img tag within <p> tag and If I click the img or the <p> tag the inner div should be visible and again If I click it it should hide the div.

I am getting it work for the first time but If I click the img or the <P> tag for the second the image dosent change.

I dont want the background image of the <p> should change I need it for the img tag.

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery(".content").hide();
        //toggle the componenet with class msg_body
        jQuery(".heading").click(function () {
            var $this = $(this),
            $contentArea = $this.next('.content');

            if (!$contentArea.hasClass('active')) {
                $this.find('img').attr("src", "img/Minus.png");
                $(".content.active").slideToggle(500).removeClass('active');
                $contentArea.slideToggle(500).addClass("active");
            }
            else if ($contentArea.hasClass('active')) {
                $this.find('img').attr("src", "img/Plus.png");
                $(".content.active").slideToggle(500).addClass('active');
            }
        });
    });
</script>

This is how I’m showing it:

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

Here is my fiddle

Answer 1

This code:

else if ($contentArea.hasClass('active')) {
    $this.find('img').attr("src", "img/Plus.png");
    $(".content.active").slideToggle(500).addClass('active');
}

Should be:

else if ($contentArea.hasClass('active')) {
    $this.find('img').attr("src", "img/Plus.png");
    $(".content.active").slideToggle(500).removeClass('active');
}

You were hiding the active class and then adding active back onto it which was causing the problems.

If you don’t care about more than one being expanded at a time then the code can be very simple:

jQuery(".heading").click(function () {       
    $('img.plus, img.minus', this).toggle();

    $(this).next('.content')
        .slideToggle(500);        
});

http://jsfiddle.net/infernalbadger/PCgZy/3/