Hidden object but there is still space reserved

Question

I am trying to make two forms that do not display at the same time. The first remains visible when the page opens, but if the user selects, the first should be hidden, and the second should take the place. So here is my CSS for this:

#switcher { float: right; font-size: 12px; } #web_upload { visibility: hidden; } #local_upload { visibility: visible; } 

Here is the HTML:

 <form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data"> <center> <input type="file" name="file" id="file" /> <br /> <input type="image" name="submit" src="graphics/upload.png" /> </center> </form> <form action="url_upload.php" id="web_upload" method="post" method="post"> <center> <input type="text" name="url" id="url" /> <br /> <input type="image" name="submit" src="graphics/upload.png" /> </center> </form> 

And here is my Javascript:

 function showHide(id, other) { if(document.getElementById(id)) { if(document.getElementById(id).style.visibility != "hidden") { document.getElementById(other).style.visibility = "hidden"; document.getElementById(id).style.visibility = "visible"; } else { document.getElementById(id).style.visibility = "hidden"; document.getElementById(other).style.visibility = "visible"; } } } 

So I have three problems:

• The second form has a reserved space on the page, and I do not want this empty space.
• The second form is displayed on this reserved place instead of going through the first.
• If the user selects one of the options and tries to select the other after nothing happens

How can I solve these problems?

Answer 1

@Nathan Campos: I would combine display and visibility in the same way -

CSS

 #web_upload { display: none; visibility: hidden; } #local_upload { display: inline; visibility: visible; } 

JavaScript:

 function showHide(id, other) { var id1 = document.getElementById(id); var id2 = document.getElementById(other); if (id1.style.display == "none") { id1.style.display = "inline"; id1.style.visibility = "visible"; id2.style.display = "none"; id2.style.visibility = "hidden"; } else if (id1.style.display == "" || id1.style.display == "inline") { id1.style.display = "none"; id1.style.visibility = "hidden"; id2.style.display = "inline"; id2.style.visibility = "visible"; } } 

Answer 2

display: none/block; Show Form / Fully Hide and Clear Space

visibility: hidden ; Hide the form, but save the saved space.

Answer 3

The CSS visibility property here is not the right choice.

The 'visibility' property indicates whether the fields generated by the element are displayed. Invisible blocks still affect the layout (set the "display" property to "none") to completely exclude the generation of boxes)

Link: http://www.w3.org/TR/CSS21/visufx.html#visibility

Consider instead the CSS display - display:none property applied to an element, it will look as if it does not exist at all, it will be invisible and will not affect the layout.

 #switcher { float: right; font-size: 12px; } #web_upload { display:none; } #local_upload { display:block; } 

//

 function showHide(id, other) { switch (document.getElementById(id).style.display) { case 'block': document.getElementById(id).style.display = 'none'; document.getElementById(other).style.display = 'block'; case 'none': document.getElementById(id).style.display = 'block'; document.getElementById(other).style.display = 'none'; } }