JavaScript Forum

**Gilligan** · 07-05-2008, 08:11 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script>

function multipart(){
if(document["form"]["input"].checked){
document.getElementById("parts").style.visibility="visible"
}
else{
document.getElementById("parts").style.visibility="hidden"
}
}
//-->
</script>
</head>

<body onload="toggleTextBox(false)">
<form method="post" action="editor.php" name="form">
                        
      &lt;?php echo $linkname ?&gt; Address: 
        <input type="text" name="textfield" id="textfield" />
  <input type="checkbox" name="input" value="ON" onclick="multipart()"> Multi Parts?
       <br /><br />
              
  <div id="parts" style="visibility:hidden">
                      Part 2: <input type="text" /><br />
                    Part 3: <input type="text" /><br />
                    Part 4: <input type="text" /><br />
                    Part 5: <input type="text" /><br />
                    Part 6: <input type="text" /><br />
                    Part 7: <input type="text" /><br />
                    
  </div>   
              <br />
              <input type="submit" value="Submit" />
                      
</form>              
                         
</body>
</html>

This shows the div "parts" when the checkbox is checked, and hides when unchecked. however when unchecked there's a whitespace the size of the div contents. How can I remove this?

Thanks

**mgraphic** · 07-05-2008, 08:27 PM

I always use the display style.

style.display='none'; // hide

style.display=''; // normal

**Gilligan** · 07-06-2008, 07:34 AM

instead of visibility="hidden" ??

**CrazeDizzleD** · 07-06-2008, 11:51 AM

Quote:

Originally Posted by Gilligan

instead of visibility="hidden" ??

Visibility:hidden; removes the element visually, however it remains there.

Display:none; removes the element visually, and also "deletes" it from the page.