hide div when click outside
<p>I am using a simple javascript code to toggle div onclick. You can see it in action on this link: k-prim.biz/Untitled-2.html - it is a quite simple demo page. What I want to make is to hide div not only when click on the "link" but also when click outside the div. Also how can I change the css style of the "link" when the div is displayed? Thank you in advance!</p>

<pre><code>&lt;script type="text/javascript" language="javascript"&gt; 
   function showHide() {
   var ele = document.getElementById("showHideDiv");
if(ele.style.display == "block") {
        ele.style.display = "none";
  }
else {
    ele.style.display = "block"; }
}
&lt;/script&gt; 
&lt;a href="#" onClick="return showHide();" &gt;link&lt;/a&gt;
&lt;div id="showHideDiv" style="display:none;"&gt;hello!&lt;/div&gt;    
</code></pre>
