Question

I want the user to be able to click on the words “Click Here” and toggle between showing/hiding the drop down. This works fine. I also want the user to be able to click outside of the drop down area and hide the drop down menu if it is currently displayed. How do I do this?

jquery:

function dropDown() {
    $(document).ready(function(){
        $('#myID').load('my_file.php',function(){
            document.getElementById("myID").style.visibility="visible";
            $('#myID').slideToggle('fast');
        })
        return false;
    });
}

HTML:

<div onclick="dropDown()">Click Here</div>
<div id="myID"></div>

CSS:

#myID {
visibility:hidden;
z-index:9999;
display:none;
}

Answer 1

Remove the visibility:hidden attribute from the code

Attach the click handlers for both the div and the document

$('.dropdown').on('click', function(e) {
    e.stopPropagation();
    $('#myID').slideToggle('fast');
});

$(document).on('click', function(e) {
    if( $(e.target).hasClass('dropdown') || $(e.target).attr('id') === 'myID'){

    }
    else{
      $('#myID').hide();     
    }
});
​

CSS

#myID {
    z-index:9999;
    display:none;
    width:200px;
    height:300px;
    background-color: orange;
}​

Check Fiddle

If you want to use visibility:hidden in your code then you need to omit the display:none and vice versa…