I need help with these two functions
<p>The first one displays the div, the second one hides the dive up on clicking anywhere else in the document. the problem i have is, when i click the button to show the div, it also counts as a document click so it hides the div. how can i it make not hide the div when i click to show the div</p>

<pre><code>&lt;script type="text/javascript"&gt;
    function test22(){  

        var links = document.getElementById('links_safari');
        if(links.style.display == "none"){

            document.getElementById('links_safari').style.display="";
            var content = $('#links_safari').html();             
            var words = content.split(',');             
            for (var i = 2; i &lt; words.length; i += 3) { 
                words[i] += '&lt;br&gt;'; 
            }
            content = words.join(' ');  
            $('#links_safari').html(content); 

            $('#links_safari').css("margin-top", -322);
            $('#links_safari').css("margin-left", 180);
            safariPopupStatus++;
        }
        else{
            links.style.display="none";

        }
    }



&lt;/script&gt;

&lt;script type="text/javascript"&gt;
    $(function (){

        $(document).click(

            function (e){
                var links = document.getElementById('links_safari');

                links.style.display="none";
                }  
        )
    })
&lt;/script&gt;
</code></pre>
