how to show and hide a div using onfocus

Question

hi, i'm sorta new to this. i have this so far:

<style type="text/css">
#show_hide{display:none;}
</style>

<div id="show_hide">
ok
</div>

<input type="text" onfocus="document.getElementById('show_hide').style.display='block';">

it works when i click the input box to show the div. prob is i need it to hide again when i click somewhere else or "unfocus" any help? thanks!

Answer 1

have you tried leveraging onblur event http://javascript.gakaa.com/div-blur-4-0-5-.aspx

also this post might help http://stackoverflow.com/questions/1259716/how-to-blur-the-div-element

Answer 2

So, your issue is that your CSS sets the default state of the div (to display:none), then your JavaScript changes the state onfocus to display: block--but you don't have any code to revert the div back to the hidden state.

With plain JavaScript I believe you'll want the onblur event (focus lost) to handle this:

<input type="text" 
    onfocus="document.getElementById('show_hide').style.display='block';"
    onblur="document.getElementById('show_hide').style.display='none';">

Here it is in action, with your sample

Answer 3

The event handler you are looking for is called onBlur (http://www.w3schools.com/jsref/event_onblur.asp).