title: Hidden form displays empty area
body: <p>I would like to hide a form within a button. Hiding the form is done but the problem is that the hidden forms area size is displayed as an empty area under my box so I have a big space between the bottom of the button and content below the button e.g. another button.</p>
  
  <p>Button Code</p>
  
  <pre><code>&lt;button class="myButtonl" onclick='showForm();'&gt;Create a Player&lt;/button&gt;
  </code></pre>
  
  <p>Form Code</p>
  
  <pre><code>&lt;div id="div1" style="visibility:hidden;"&gt;
      &lt;form action="team.php" method="POST" name="profiles"&gt;
          &lt;div&gt;Team Name: &lt;input type="text" name="psn" value=""&gt;&lt;/div&gt;
          &lt;input type="submit"&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>&lt;script&gt;
      function showForm() { 
          document.getElementById('div1').style.visibility= 'visible' ;
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>I guess the effect i am looking for is that the button holds the form inside of it until the button has been clicked and then the form drops down to be displayed below it. Also if it is possible that if the button is clicked again while the form is showing that the form is put back inside of the button so it is not visible any more until it is clicked again.</p>