[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 343
  • Last Modified:

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
0
Webboy2008
Asked:
Webboy2008
  • 2
1 Solution
 
lpxtechCommented:
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

0
 
scrathcyboyCommented:
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>
0
 
lpxtechCommented:
That code is the same code. window.onload works exactly as onload=""
<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>

Open in new window

0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now