I have used a javascript to show div by onclick but when i click outside div i want to hide the div.

after more searches, i have found an function, and it works perfectly

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

my code:

<script>
// 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';
  }
}

</script>
<style>#tools{display:none;}</style>

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

This is my full code, you can test it on your puter.

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

I have used a javascript to show div by onclick but when i click outside div i want to hide the div.

after more searches, i have found an function, and it works perfectly

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

my code:

<script>
// 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';
  }
}

</script>
<style>#tools{display:none;}</style>

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

This is my full code, you can test it on your puter.

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

• javascript

• The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click ) – Alaa Gamal Commented Jun 26, 2012 at 17:11
• Here's an example to test with: jsfiddle/JjChY – gen_Eric Commented Jun 26, 2012 at 17:12
• @Rocket it's requires double click, Not one !! try to refresh the page – Alaa Gamal Commented Jun 26, 2012 at 17:13
• @AlaaGamal: I didn't fix the problem, I just made an example so others could see the problem. – gen_Eric Commented Jun 26, 2012 at 17:14
• @Rocket Ah am sorry, and thanks for your help – Alaa Gamal Commented Jun 26, 2012 at 17:16

5 Answers 5

Try this - http://jsfiddle/JjChY/1/

Change

el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';

to

el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';

Use this:

el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';

It should work.

The problem is that el.style.display only reads from the element's inline styles, not its CSS.

So, on the first click el.style.display is '' (blank string), so it's set to 'none'. Then the second time, el.style.display is 'none', so it works.

You need to try to read from the element's CSS if its inline styles are blank. I'm going to use the getStyle method from quirksmode for this:

function getStyle(x, styleProp) {
    if (x.currentStyle) {
        var y = x.currentStyle[styleProp];
    }
    else if (window.getComputedStyle) {
        var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
    }
    return y;
}

// click on the div

function toggle(e, id) {
    var el = document.getElementById(id);
    var display = el.style.display || getStyle(el, 'display');
    el.style.display = (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';
    }
}​

DEMO: http://jsfiddle/JjChY/2/

Your code is a little convoluted. It can be written much simpler:

<script>
var toggle = function(id) {
  var element = document.getElementById(id);
  element.className = element.className === 'hidden' ? '' : 'hidden';

  return false;
};
</script>

<style>
.hidden {
    display: none;
}
</style>

<div id="tools" class="hidden">Hidden div</div>
<a href="#" onclick="toggle('tools');">show/hide</a>

If you have jQuery, you could do something like this for the click outside.

First, set a class on the "tools" div when the mouse is inside it. Remove the class when the mouse is not inside it.

$('#tools').hover( function() {
    $('#tools').addClass("inside");
},
function() {
    $('#tools').removeClass("inside");
});

Then, track clicks on the HTML. Hide if the "inside" class is not on the "tools" div.

$("html").click( function() {
    $("#tools").not(".inside").each( function() {
        $("#tools").hide();
    });
});