Todavía muestra div cuando textarea / input onblur / pierde el foco

así que trato de ocultar / mostrar un elemento div usando onfocus y onblur:

 

Esto funciona bien, pero el problema es que la división se esconde nuevamente cuando el área de texto / entrada ya no tiene foco.

Este es el código completo: enlace JSFIDDLE .
Puede ver que no puede marcar la checkbox o seleccionar texto.

¿Qué puedo hacer para seguir mostrando el elemento div cuando el área de texto perdió el foco o para hacer que el área de texto aún tenga el enfoque cuando hice clic en el div?

Lo siento, pero soy nuevo en Javascript.

Gracias por adelantado,
Filipina

    Esta pregunta no es trivial, pero de acuerdo con esta respuesta , se puede resolver de la siguiente manera:

    HTML

      

    This div is blue


    Checkbox A

    This div is green


    Checkbox B

    Javascript

     var current = null; //currently shown div - divID1 or divID2 function focushandler(id) { if (current !== null) { current.style.display = 'none'; } var div = document.getElementById(id); div.style.display = 'block'; current = div; } function clickhandler(e) { if (current == null) { //if both divs are hidden return; } e = e || window.event; //for IE8,7 compatibility var t = e.target || e.srcElement; // clicked element var sig = false; // now check all parents while (t) { if (t === current || t.nodeName == 'TEXTAREA') { sig = true; } t = t.parentNode; } if (sig) { return; } current.style.display = 'none'; current = null; } if (document.documentElement.addEventListener) { document.documentElement.addEventListener('click', clickhandler, false); } else if (document.documentElement.attachEvent) { // for IE8-7 compatibility document.documentElement.attachEvent('onclick', clickhandler); } 

    JSFiddle : http://jsfiddle.net/PfQfN/4/ (funciona bien con Firefox, Chrome, IE7-10, Safari y Opera). O, alternativamente, puede usar este código un poco modificado: http://jsfiddle.net/PfQfN/6/ (los efectos son los mismos).

    CSS actualizado: y de acuerdo con esta muy útil respuesta , esos elementos pueden posicionarse mejor como se muestra en este violín : http://jsfiddle.net/PfQfN/9/

    Al agregar un retraso muy corto (setTimeout) en la acción de desenfoque, la checkbox funciona. Por ejemplo:

     setTimeout(function(){ document.getElementById('divID2').style.display='none'; }, 100); 

    Aquí hay un jsfiddle actualizado .