Question

When a user clicks a button…a div slides down…

$(document).ready(function(){
    $("#friend_requests_container").click(function(){
        $("#friend_requests").slideDown(500);
    });
});

However, what I want to do is when the user clicks anywhere else on the page, the div slides back up EXCEPT if they click on the button to reveal the div.

What i tried was this.

$(document).ready(function(){
    $("#friend_requests_container").click(function(){
        $("#friend_requests").slideDown(500);
    }, function(){
        $("#friend_requests").fadeOut(500);
    });
});

but that didnt seem to work…
Any ideas? Thanks 🙂

Answer 1

You need two events one on friend_requests_container click and other on document click, When friend_requests_container is click the event is propagated to document click as well so you need to use stopPropagation()

Live Demo

$(document).ready(function(){
    $("#friend_requests_container").click(function(event){     
        $("#friend_requests").slideDown(500);
                 event.stopPropagation();             
    });

    $(document).click(function(event){
        $("#friend_requests").slideUp(500);
         event.stopPropagation();      
    });   
});​