How can I hide the DIV completely?
I have a number of HTML elements in my page, which should be hidden by the click. It should work in all browsers. See the snippet. It works fine in FF, Opera, but doesn't work in IE. Why?
<html><body>
<p>This is the first paragraph.</p>
<div id='par'>This is what I want to hide: <input name="test" /></div>
<p>This is what should go up when the previous par is hidden.</p>
<input type="button" value="Hide" onclick="Hide(); return false;" />
<input type="button" value="Show" onclick="Show(); return false;" />
<script type='text/javascript'>
<!--
function Hide () {
document.getElementById ('par').style.visibility = 'hidden';
document.getElementById ('par').style.position = 'absolute';
}
function Show () {
document.getElementById ('par').style.visibility = 'visible';
document.getElementById ('par').style.position = 'relative';
}
-->
</script>
</script>
</body></html>
ASKER
Same effect in IE7. Try to click Hide and then Show. The INPUT field won't be visible.
Hi technoparkcorp,
Try use <span> instead of <div> object.
Try use <span> instead of <div> object.
try omit the space
document.getElementById ('par').style.visibility = 'hidden';
^
Hi technoparkcorp,
One more thing, make sure you define the control's type properly instead to avoid any unknown error.
<input name="test" type="text"/>
One more thing, make sure you define the control's type properly instead to avoid any unknown error.
<input name="test" type="text"/>
?? your script tag closed twice? may be source of your problem....
ASKER
None of the proposed solutions work. Any other ideas?
(you can actually try it yourself in IE7)
(you can actually try it yourself in IE7)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks, it works!
Valid markup should be following:
HTML basics: http://www.w3schools.com/html/default.asp
Page validation: http://validator.w3.org/check
HTML basics: http://www.w3schools.com/html/default.asp
Page validation: http://validator.w3.org/check
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>xxx</title>
<script type='text/javascript'>
function Hide() {
document.getElementById('par').style.display = 'none';
}
function Show() {
document.getElementById('par').style.display = 'block';
}
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<div id='par'>This is what I want to hide: <input name="test" type='text' ></div>
<p>This is what should go up when the previous par is hidden.</p>
<div><input type="button" value="Hide" onclick="Hide();" ><input type="button" value="Show" onclick="Show();" ></div>
</body>
</html>
Try display property instead of visibility. It will not leava any hidden gap as well.
eg:
function Hide () {
document.getElementById ('par').style.display= 'none';
document.getElementById ('par').style.position = 'absolute';
}
function Show () {
document.getElementById ('par').style.display= 'block';
document.getElementById ('par').style.position = 'relative';
}