Clicking on a label within #row-product_id_page-0-0 triggers the display of #row- elements as shown in the code snippet below:
$('#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)
})
Before clicking the label, the DOM looks like this:
And after clicking the label:
An unusual observation is that although the elements appear upon clicking, the page height remains unchanged:
Pre-click:
Post-click:
To add to the confusion, opening the Chrome inspector seems to resolve the issue (also occurs in Firefox):
This behavior has me puzzled. What could be causing it?
Explore the live site: