Geek asks and answers

Slidetoggle with close button - jQuery

I use the slidetoggle function to open and close a window when I click on a link. I want to be able to add a “closed” button (link) inside this window, as well as the ability to close it using the slidetoggle trigger. How should I do it?

This is my jQuery:

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

My 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>
+1
source share
2 answers

Look Fiddle , to see how it works.

$(".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;
});

That way, the class activewill be set when tight coupling is also used.

You can also have a lot .popup-boxon the same page.

+1
source

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>
0
source

More articles:


All Articles