double click to show an div
<p>I have used a javascript to show div by onclick but when i click outside div i want to hide the div.</p>

<p>after more searches, i have found an function, and it works perfectly </p>

<p>but there is an issue, the code requires double click for first time, to show the dive</p>

<p>my code:</p>

<pre><code>&lt;script&gt;
// click on the div
function toggle( e, id ) {
  var el = document.getElementById(id);
  el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';

  // save it for hiding
  toggle.el = el;

  // stop the event right here
  if ( e.stopPropagation )
    e.stopPropagation();
  e.cancelBubble = true;
  return false;
}

// click outside the div
document.onclick = function() {
  if ( toggle.el ) {
    toggle.el.style.display = 'none';
  }
}

&lt;/script&gt;
&lt;style&gt;#tools{display:none;}&lt;/style&gt;

&lt;div id="tools"&gt;Hidden div&lt;/div&gt;
&lt;a href="#" onclick="toggle(event, 'tools');"&gt;show/hide&lt;/a&gt;
</code></pre>

<p>This is my full code, you can test it on your computer.</p>

<p>The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click )</p>
