title: HTML page, hidden div show up
body: <p>I am implementing this effect with HTML, bootstrap2, and JS. 
  <br>
  <br>Sorry I don't have a working example yet, and did not find an example could demo anywhere, so I will just describe what I want to do in detail.
  <br>It is a plain HTML page visually contains two "cards" aligned vertically. The card could be just a <code>div</code> contains a <code>textbox</code> and a <code>button</code>. Initially only one card is visible and the other one is hidden, and I hope the page size fits only one card. After I click the button on card 1, the page hight should get greater to fit in two cards, and card two shows up.</p>
  
  <p>My uncertain part would be: How do I hide a div initially and show it by clicking a button? (I want the page size fits any number of cards) I am not too familiar with web development, so a working example will be very helpful!</p>
  
  <p>Thank you!</p>