Slidetoggle avec un bouton de fermeture - jQuery

Question

J'utilise la fonction slidetoggle pour ouvrir & fermer une boîte en cliquant sur un lien. Je veux être en mesure d'ajouter un bouton «fermer» (lien) à l'intérieur de cette boîte, de même que de pouvoir le fermer via le déclencheur Slidetoggle. Comment ferais-je cela?

Ceci est mon jQuery:

$(".popup-b").hide(); 
$(".popup-l").click(function(){ 
    $(this).toggleClass("active").next().slideToggle(0); 
    return false; 
}); 

Mon HTML

<a class="popup-l" href="#">Areas</a> 
<div id="area-p" class="popup-box"> 
    <div class="close-this"><a href="#">Close</a></div> 
    <p>This is the popup box</p> 
</div> 

Answer 1

Découvrez ce Fiddle pour le voir fonctionner.

$(".popup-content").hide(); 
$(".popup-title").click(function(){ 
    $(this).toggleClass("active").next().slideToggle(0); 
    return false; 
}); 
$(".popup-content .close-this").click(function(){ 
    $(".popup-title", $(this).parents(".popup-box")).click(); 
    return false; 
}); 

De cette façon, la classe active sera setted lorsque le lien étroit est utilisé aussi. Vous pouvez également avoir beaucoup .popup-box sur la même page.

Answer 2

jQuery:

$(".popup-b").hide(); 
$(".popup-l").click(function(){ 
    $(this).toggleClass("active").next().slideToggle(0); 
    return false; 
}); 
$(".close-popup").click(function() { 
    $(this).parent().prev().toggleClass("active").next().slideToggle(0); 
); 

HTML

<a class="popup-l" href="#">Areas</a> 
<div id="area-p" class="popup-box"> 
    <div class="close-this"><a href="#" class="close-popup">Close</a></div> 
    <p>This is the popup box</p> 
</div>