Mostrar div clicado uma vez e ocultar ao clicar fora

Estou tentando mostrar o # subscribe-pop div assim que um link é clicado e oculto quando clico em qualquer lugar fora dele. Eu posso conseguir mostrar e esconder se eu mudar o:

$('document').click(function() {

PARA

$('#SomeOtherRandomDiv').click(function() {

HTML:

<div id="footleft">
    <a href="#" onclick="toggle_visibility('subscribe-pop');">Click here to show div</a>
    <div id="subscribe-pop"><p>my content</p></div>
</div>

Roteiro:

<script type="text/javascript">
    function toggle_visibility(id) {
        var e = document.getElementById("subscribe-pop");
        if(e.style.display == 'block')
            e.style.display = 'none';
        else
            e.style.display = 'block';
        }
    }

    $('document').click(function() {
        $('#subscribe-pop').hide(); //Hide the menus if visible
    });

    $('#subscribe-pop').click(function(e){
        e.stopPropagation();
    });
</script>

questionAnswers(3)

yourAnswerToTheQuestion