asked on

javascript show hide div

I have input box and when the user start to type something inside of the textbox, I will a div shown.
When the user tab into other textbox, I want div hidden. and by default (on load event)
i do not want to show div.

Can you show me how it works with javascript css?

Thank you

lpxtech

Here is some example code.

If you would like to perform an action when the focus leaves the input you can use onblur="doStuff();"

<script type="text/javascript>
 
window.onload = function() {
    hideDiv('myDiv');
}
 
function hideDiv(divID) {
    document.getElementById(divID).style.display = 'none';
}
 
function showDiv(divID) {
    document.getElementById(divID).style.display = 'block';
}
 
</script>
</head>
<html>
<input type="text" name="something" onFocus="hideDiv('myDiv');" onChange="showDiv('myDiv');" />
<div id="myDiv">
 
</div>

Open in new window

scrathcyboy

that code above won't work, all the main HTML page tags are out of place. Simply do this --

Javascript --

function divHide() {
document.getElementById('div1').style.display="none";
}

function divShow() {
document.getElementById('div1').style.display="block";
}
HTML --

<BODY onLoad= "divHide();" >

<input type="text" name="text1" onBlur="divHide();" onKeyUp="divShow();" >

<DIV id="div1"> this is initially hidden, but shows when input field above is changed, and disappears when mouse moved away from the input field </DIV>

ASKER CERTIFIED SOLUTION

lpxtech

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial