Ocultar div si se preciona fuera

[iovan]

Hola compañeros llevo bastante rato intentado hacer algo con un div.

Código Javascript:

$('.dragged').on('click',function(){
        var dragged_id = $(this).data('dragged-id');
        
        if($('#'+dragged_id).css('display') == 'none'){
            $('#'+dragged_id)
                .show("blind", {direction: "vertical"}, 600)
        } 
        else {
            $('#'+dragged_id).hide("blind", {direction: "vertical"}, 600);
        }
    });
 

el jquery anterior lo he construido para mostar un div si se preciona un botón

ejemplo de uso:

Código HTML:

<a href="#" data-dragged-id='header-aboutus' class="dragged">boton</a>
<div id="header-aboutus" style="display:none">            
div oculto
</div>
 

El código funciona bien, pero me preguntaba de que forma puedo ocultar este div si estando mostrado y se preciona fuera de el en cualquier otra parte que no sea dentro de este div...

Ya lo había conseguido hacer pero una vez ejecutado el evento mouseout de este div... Pero es incorrecto por que para ocultar el div no necesariamente el cursor del mouse debe entrar y salir del div.... Podría ser que el usuario nunca coloque el cursor del mouse dentro del div. me explico?

Gracias por cualquier ayuda.
un saludo.


EDITO:

Con que nombre se le conoce a este tipo de plugin. Por ejemplo, seguramente más de uno ha visto en algún sitio que cuando presionas un botón aparece un div con el efecto (blind) como si fuera un slider de arriba hacía abajo...

Con que tipo de nombre se le llega a conocer a estos plugins?
para buscarlo en google. Gracias.