display none vs. visibility test

Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:

by Andy Bulka

HTML

<a href="#" id="dotoggle">dotoggle</a>
<p id="outervisibility_info">--</p>
<p id="childvisibility_info">--</p>
<br>
<div id="out1">out1
    <div id="child1">child1
    </div>
</div>
    
<hr>
    
    <p>Hiding an element can be done by setting the display property to "none" or the visibility property to "hidden". However, notice that these two methods produce different results:</p>

    <p>visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.</p>
    
    <p>display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there:</p>
    
    See <a href="http://www.w3schools.com/css/css_display_visibility.asp">article</a>

CSS

div { background: cyan; }

JavaScript

$('#dotoggle').on('click', function(e) { dotoggle(); });

function dotoggle() {
    $('#out1').toggle();
    report();
}
function report() {
    var msg1 = 'outer display is ' + $('#out1').css('display') + ' visibility ' + $('#out1').is(":visible");
    var msg2 = 'child display is ' + $('#child1').css('display') + ' visibility ' + $('#child1').is(":visible");
    
    $('#outervisibility_info').text(msg1);
    $('#childvisibility_info').text(msg2);
}

report();