jQuery - Show/Hide Image on Expand Collapse Toggle

Question

I have a simple issue. I have developed some code that collapses and expands to DIV's using the slideToggle . What i want to now do is show/hide the corresponding expand and collapse images.

.htmlpage:

<li>
<div class="toggle_head togglebackground">
    &nbsp<img src="images/expand.png" alt="Expand" id="expand" class="expand">
    &nbsp<img src="images/collapse.png" alt="Collapse" id="collapse" class="collapse">
    <label> Cookies</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about cookies.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Cookies) -->
</li>
<li>
<div class="toggle_head togglebackground">
    &nbsp<img src="images/expand.png" alt="Expand" id="expand" class="expand">
    &nbsp<img src="images/collapse.png" alt="Collapse" id="collapse" class="collapse">
    <label> Terms</label>
</div>
<div class="box toggle_body">
    <ul class="list">
        <li>
           <label disabled="disabled">Information about terms and conditions.....</label>
        </li>
    </ul>
</div>
<!-- !END section (Terms) -->
</li>

jQuery code:

$( document ).ready(function() {

//hide the all of the element with class msg_body
$(".toggle_body").hide();
$(".collapse").hide();

//toggle the componenet with class msg_body
$(".toggle_head").click(function()
{
    $(this).next(".toggle_body").slideToggle(300);
    //$(".collapse").show();
    //$(this).next(".collapse").show();

});

});

Thanks

Answer 1

You could use the callback of slideToggle to toggle the visibility of the expand/collapse elements:

$(".toggle_head").click(function() {

    var $this = $(this);

    $this.next(".toggle_body").slideToggle(300, function() {
      $this.children('img').toggle();
    });

});

That will toggle the visibility of all images which are direct children of .toggle_head .

By the way, it sounds as if you're using the same IDs on multiple elements. Remove them, IDs must be unique.

Here's a fiddle

Answer 2

$(".toggle_head").click(function()
{
    $(this).next(".toggle_body").slideToggle(300, function () {
        var status = $(this).is(':hidden');
        $('#collapse').toggle(status);
        $('#expand').toggle(!status);
    });
});

Not tested, but gives the idea

Answer 3

I've also made a Fiddle for you. The difference is, that it closes already opened "bodies", that's why I use :visible there

$( document ).ready(function() {
    $(".toggle_head").click(function()
    {
        if ($(this).next(".toggle_body").css('display')!=='block') {
            $(".toggle_body:visible").slideToggle(300);
            $(this).next(".toggle_body").slideToggle(300);
            $(this).find('img').toggle();
        }
    });
});

and CSS is used instead of hide() first

(also it has nice images!)