JAVA SCRIPT - Hiding Page Sections

 Hiding Page Sections

Problem

You want to hide an existing page element and its children until needed. 

Solution

You can set the CSS visibility property to hide and show the message:

msg.style.hidden="visible"; // to display
msg.style.hidden="hidden"; // to hide

or you can use the CSS display property:

msg.style.display="block"; // to display
msg.style.display="none"; // to remove from display

EXPLAIN

Both the CSS visibility and display properties can be used to hide and show ele‐ ments. There is one major difference between the two that impacts which one you’ll use. The visibility property controls the element’s visual rendering, but its physical pres‐ ence still affects other elements. When an element is hidden, it still takes up page space. 

The display property, on the other hand, removes the element completely from the page layout. The display property can be set to several different values, but four are of particular interest to us:

 • none: When display is set to none, the element is removed completely from display.

 • block: When display is set to block, the element is treated like a block element, with a line break before and after.

 • inline-block: When display is set to inline-block, the contents are formatted like a block element, which is then flowed like inline content.

 • inherit: This is the default display, and specifies that the display property is in‐ herited from the element’s parent.

There are other values, but these are the ones we’re most likely to use within JavaScript applications. Unless you’re using absolute positioning with the hidden element, you’ll want to use the CSS display property. Otherwise, the element will affect the page layout, pushing any elements that follow down and to the right, depending on the type of hidden element. There is another approach to removing an element out of page view, and that is to move it totally offscreen using a negative left value. 

This could work, especially if you’re cre‐ ating a slider element that will slide in from the left. It’s also an approach that the ac‐ cessibility community has suggested using when you have content that you want ren‐ dered by assistive technology (AT) devices, but not visually rendered.