Hidden Object But Still Have a Place Reserved

Question

I'm trying to make two forms that aren't displayed at the same time. The first one stays visible when the page opens, but if the user select, the first one should be hidden and the second one might take it's 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 to do it:

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'm having three problems:

• The second form has a reserved place on the page and I don't want this empty place
• The second form is displaying on that reserved place instead of taking place over the first one
• If the user select one of the options and try to select other after nothing happens

How I can solve this problems?

Answer 1

@Nathan Campos: I'd combine display and visibility like so --

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";
    }
}