title: onclick a button to expand into a form
body: <p>I have 3 buttons layed out, I want it so when the button is clicked, the box will expand with an ease, into a small form.</p>
  
  <p>here is my layout</p>
  
  <p>CSS: </p>
  
  <pre><code>        .order-box{width:800px; height:80px; margin:0 auto; margin-top:20px;}
  
          .order li{list-style:none;text-align:center; margin-left:70px; float:left;}
          .order li #order-btt:hover{background:#2e7794; cursor:pointer; font-weight:300;}
          .order li #order-btt{padding:10px 10px; width:160px; color:white; font-size:16px; background-color:black; opacity:0.6; -moz-transition: background 0.3s linear 0s, color 0.3s linear 0s; border-radius:3px; cursor:pointer; border-radius:6px;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code> &lt;div class="order-box"&gt;
          &lt;ul class="order"&gt;
              &lt;li&gt;&lt;input type="button" id="order-btt" name="order-btt" value="Order Yours" onclick="orderBox();" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="button" id="order-btt" name="order-btt" value="New Inventory" onclick="orderBox();" /&gt;&lt;/li&gt;
              &lt;li&gt;&lt;input type="button" id="order-btt" name="order-btt" value="Test Drive" onclick="orderBox();" /&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>function orderBox(){
       document.getElementById("order-btt").onclick.(this is where im stuck)                 
  }
  </code></pre>
  
  <p>oh okay, so I want something like this to appear</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form name="frm" id="frm" action="form-validation-advanced.html" method="get" onsubmit="return formValidation();"&gt;
  &lt;table border="1" cellspacing="5" cellpadding="5" align="center" width="500"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Name:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="text" name="nm" id="nm" placeholder="Enter your name" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          Age:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="text" name="ag" id="ag" placeholder="Enter your age" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                    &lt;tr&gt;
                      &lt;td&gt;
                          Email:
                      &lt;/td&gt;
                      &lt;td&gt;
                          &lt;input type="text" name="email" id="email" placeholder="Enter your email" /&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
  </code></pre>