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>

Open in new window

technoparkcorpAsked:
Who is Participating?
 
JohnSixkillerCommented:
Look for valid HTML markup.

Omit changing DIVs position, it takes it out of standard flow of document.
<html><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>
<input type="button" value="Hide" onclick="Hide();" />
<input type="button" value="Show" onclick="Show();" />
<script type='text/javascript'>
 
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';
}
 
</script>
</body></html>

Open in new window

0
 
David H.H.LeeCommented:
Hi technoparkcorp,
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';
}
0
 
technoparkcorpAuthor Commented:
Same effect in IE7. Try to click Hide and then Show. The INPUT field won't be visible.
0
Cloud Class® Course: Certified Penetration Testing

This CPTE Certified Penetration Testing Engineer course covers everything you need to know about becoming a Certified Penetration Testing Engineer. Career Path: Professional roles include Ethical Hackers, Security Consultants, System Administrators, and Chief Security Officers.

 
David H.H.LeeCommented:
Hi technoparkcorp,
Try use <span> instead of <div> object.
0
 
fsze88Commented:
try omit the space
document.getElementById ('par').style.visibility = 'hidden';
                       ^ 

Open in new window

0
 
David H.H.LeeCommented:
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"/>
0
 
fsze88Commented:
?? your script tag closed twice? may be source of your problem....
0
 
technoparkcorpAuthor Commented:
None of the proposed solutions work. Any other ideas?

(you can actually try it yourself in IE7)
0
 
technoparkcorpAuthor Commented:
Thanks, it works!
0
 
JohnSixkillerCommented:
Valid markup should be following:

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>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.