How to hide toggle div when clicking anywhere on the page?

HTML

<div id="theDiv">Some contents</div>
<div id="showDivBtn">Toggle link</div>

STYLE

<style>
#theDiv {
    width: 50px;
    height: 50px;
    background: #e9e9e9;
}
#showDivBtn {
    margin-top:100px;
    width: 100px;
    height: 50px;
    cursor: pointer;
}

</style>

SCRIPT

<script>

$('.dropdown').fadeOut();

$(document).on('click', function(e) {
    if ( $(e.target).closest('.gbtn').length ) {
        $(".dropdown").fadeIn();
    }else if ( ! $(e.target).closest('.dropdown').length ) {
        $('.dropdown').fadeOut();
    }
});

</script>