title: Elements appear on click but height of page stays the same?
body: <p>The following code makes the <code>#row-</code> elements display when a label in <code>#row-product_id_page-0-0</code> is clicked:</p>
  
  <pre><code> $('#row-product_id_page-0-0 label').click(function() {
      var str = $(this).find('.am-product-title').text()
      var levelText = str.substring(0, 15)
  
      $('#row-html2-0, #row-html3-0, #row-html4-0').show()    
      $('#row-qfauto-1, #row-qfauto-2, #row-email-0, #row-pass-0').show()    
      $('#row-pass-confirm, #row-buttons').show()    
  
      $('#row-html3-0 span').text(levelText)
  
    })
  </code></pre>
  
  <p>The DOM before clicking a label:</p>
  
  <p><img src="https://i.stack.imgur.com/gjoKd.png" alt="enter image description here"></p>
  
  <p>After clicking a label:</p>
  
  <p><img src="https://i.stack.imgur.com/WbXKX.png" alt="enter image description here"></p>
  
  <p>The strange thing is, the element appear but the height of the page stays the same:</p>
  
  <p>Before clicking:</p>
  
  <p><img src="https://i.stack.imgur.com/PkzAP.png" alt="enter image description here"></p>
  
  <p>After clicking:</p>
  
  <p><img src="https://i.stack.imgur.com/0rqdd.png" alt="enter image description here"></p>
  
  <p>As if that wasn't weird enough things become okay if I open the Chrome inspector (the same problem happens in Firefox):</p>
  
  <p><img src="https://i.stack.imgur.com/pCP0e.png" alt="enter image description here"></p>
  
  <p>I'm baffled. What could be the problem?</p>
  
  <p>Live site: <a href="http://clo2015.chineselearnonline.com/amember/signup/landing" rel="nofollow noreferrer">http://clo2015.chineselearnonline.com/amember/signup/landing</a></p>