CODEWITHSUNDEEP
javascriptjquery
Billy
Billy

Reputation: 905

How to slideup the Div on Document Press using Jquery

HTML:

<div id="flip">Click to slide down panel</div>
<div id="panel">Hello world!</div>

Style

#panel,#flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
#panel
{
padding:50px;
display:none;
}

jQuery

$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

Here is the Demo: http://jsfiddle.net/JkQR2/

Hi. How to slideup the Div on Document Press using Jquery. Thanks

Upvotes: 2

Views: 363

Answers (3)

Shivam Chopra
Shivam Chopra

Reputation: 639

here's a little code that you need to in need of slideUp the Div on Document Press using jQuery.

Solution : Demo

     $(document).ready(function(){
         $("#flip").click(function(){
             $("#panel").slideToggle("slow");
         });
        $(document).click(function(event) {
            if(!$(event.target).is("#flip")) {
                $("#panel").slideUp(); 
            }
        });
     });

Upvotes: 1

john Smith
john Smith

Reputation: 17906

Add the click event to diocumnet 

$(document).ready(function(){
   $(document).click(function(){
     $("#panel").slideToggle("slow");
   });
});

Upvotes: 0

CodingIntrigue
CodingIntrigue

Reputation: 78525

Add a document click event handler and check the event target is not #flip:

$(document).ready(function(){
    $("#flip").click(function(){
      $("#panel").slideToggle("slow");
    });
    $(document).click(function(e) {
        if(!$(e.target).is("#flip")) {
           $("#panel").slideUp(); 
        }
    });
});

Updated fiddle

Upvotes: 3

Related Questions