Question

I’m having difficulty hiding a div when clicking outside of it; the body.

jQuery(document).ready(function( $ ) {
$('.list_container').hide().before('<div class="listbtn"> </div>');
$('.listbtn').click(function() {
    $('.list_container').animate({width: 'toggle'});
    return false;
 });
 });

I’m looking for to hide .list_container when the body is clicked, preferably it would animate toggle to hidden.

Answer 1

You have to bind and event on the document, and prevent the click propagation on the container itself.

$(document).on("click", function() {
    $(".list_container").fadeOut();
});

$(document).on("click", ".list_container", function(event) {
   event.stopPropagation();
});

Take a look at this Fiddle