jQuery - Toggle within a Toggle

Question

I have successfully developed a toggle functionality within my application. However, within the body of the close, i have a 'Close' button which i am trying to make hide the body..

Here is my .HTML:

<div class="toggle_head inputHeader">
<label>
    <img src="images/expand.png" />
</label>
<label>Step 1 >> More Info 1</label>
</div>
<div class="toggle_body more-info-statment">
<ul class="list">
    <li>
        <label class="more-info-title">More Info Statement<span><button type="button" class="btn btn--close toggle_head" style="float:right;">Close</button></span>

        </label>
    </li>
    <li>
        <label class="more-info-text">"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. .</label>
    </li>
</ul>
</div>

Here is my jQuery:

$(".toggle_body").hide();

$(".toggle_head").click(function() {
    var $this = $(this);
    $this.next(".toggle_body").slideToggle("slow", function() {
      $this.children('img').toggle();
    });
});

Here is my fiddle: http://jsfiddle.net/oampz/EvHZD/2/

As you can see, what i am trying to acheive, is when the user clicks on Close button, the toggle body hides again.

Any help appreciated.

Answer 1

Add this to code:

$(".btn").click(function() {
        var $this = $(this);
        $this.closest(".toggle_body").slideUp();
    });

Jsfiddle> http://jsfiddle.net/EvHZD/3/

Answer 2

If you want it to act like a close button, rather than slide back up, use .toggle()

$(".btn").click(function() {
    var $this = $(this);
    $this.closest(".toggle_body").toggle();
});