jQuery - Toggle in Toggle

Question

Я успешно разработал функцию переключения в моем приложении. Тем не менее, в пределах тела близких, у меня есть кнопка «Закрыть», который я пытаюсь сделать спрятать тело ..

Вот мой .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> 

Вот мой JQuery:

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

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

Вот моя скрипка: http://jsfiddle.net/oampz/EvHZD/2/

Как вы можете видеть, что я пытаюсь для того чтобы достигнуть, когда пользователь нажимает на кнопку закрытия, тело тумблер снова прячется.

Любая помощь приветствуется.

Answer 1

Добавьте к этому коду:

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

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

Answer 2

Если вы хотите, чтобы действовать как кнопка закрытия, а не скользить назад вверх, используйте .toggle()

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

Answer 3

Надеюсь, что следующий код поможет вам в том, что вы пытаетесь сделать. Я просто реорганизовал ваш код.

var sectionHead = $(".toggle_head"); 
var sectionBody = $(".toggle_body"); 
var sectionBodyCloseButton = $(".toggle_body button.btn--close"); 

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

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