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

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

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

0
technoparkcorp
Asked:
technoparkcorp
  • 3
  • 3
  • 2
  • +1
1 Solution
 
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
 
David H.H.LeeCommented:
Hi technoparkcorp,
Try use <span> instead of <div> object.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
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
 
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

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

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