Question

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

<script type="text/javascript">
    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 < words.length; i += 3) { 
                words[i] += '<br>'; 
            }
            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";

        }
    }



</script>

<script type="text/javascript">
    $(function (){

        $(document).click(

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

                links.style.display="none";
                }  
        )
    })
</script>

Answer 1

lets suppose the id of your button is showBtn the code now will be

$(document).click(

            function (e){
                if($(e.target).attr('id')=='showBtn') return

                var links = document.getElementById('links_safari');
                if(links.style.display != "none") // why not check here ?
                  links.style.display="none";

                }  
        )