how to show and hide a div using onfocus

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开发者_JAVA技巧 need it to hide again when i click somewhere else or "unfocus" any help? thanks!

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

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

also this post might help How to blur the div element?

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