title: Hidden Object But Still Have a Place Reserved
body: <p>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:</p>
  
  <pre><code>#switcher {
      float: right;
      font-size: 12px;
  }
  
  #web_upload {
      visibility: hidden;
  }
  
  #local_upload {
      visibility: visible;
  }
  </code></pre>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;form action="img_upload.php" id="local_upload" method="post" enctype="multipart/form-data"&gt;
      &lt;center&gt;
          &lt;input type="file" name="file" id="file" /&gt; 
          &lt;br /&gt;
          &lt;input type="image" name="submit" src="graphics/upload.png" /&gt;
      &lt;/center&gt;
  &lt;/form&gt;
  &lt;form action="url_upload.php" id="web_upload" method="post" method="post"&gt;
      &lt;center&gt;
          &lt;input type="text" name="url" id="url" /&gt; 
          &lt;br /&gt;
          &lt;input type="image" name="submit" src="graphics/upload.png" /&gt;
      &lt;/center&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And here is my Javascript to do it:</p>
  
  <pre><code>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";
          }
      } 
  }
  </code></pre>
  
  <p>So, I'm having three problems:</p>
  
  <ul>
  <li>The second form has a reserved place on the page and I don't want this empty place</li>
  <li>The second form is displaying on that reserved place instead of taking place over the first one</li>
  <li>If the user select one of the options and try to select other after nothing happens</li>
  </ul>
  
  <p>How I can solve this problems?</p>