This shows how Javascript (a client-side object-oriented programming language) and the DOM (the Document Object Model defined by the W3C), combined with CSS (Cascading Style Sheets) can hide or show parts of an HTML page individually, or en masse.

An obligatory link

The "Expand all" link alters elements marked as class="expand". A CSS rule defines ".expand" as "display:none". The script locates all these elements & changes their "display" value.

"Display" can be set to a value of "none", "inline", or "block", so the value must match the type of element.

Right now, the script assumes all hidden, in-line elements are marked with SPAN. It assumes all other hidden elements are block-level. Here are some common block-level elements, and here are some common in-line elements.

If you marked other in-line elements as part of the "expand" class, you'd need to refine the script. Otherwise, the script will incorrectly expand them as "block-level" elements.

This and the preceding paragraphs are all wrapped in a <div class="expand"> tag. Other block-level elements could be contained here, too, including other DIVs.

This paragraph has a link to a pop-up hidden with "display:none". This paragraph is followed by 2 paragraphs which are hidden with "visibility:hidden".

The gap above illustrates one of the trade-offs with the "visibility" property. If "position:static" — the default position — elements are hidden through their "visibility" property, the browser still reserves space for them, as above. Any static element remains in "normal flow".

If you apply "visibility:hidden" to "position:absolute" or "position:fixed" elements this isn't a problem. Elements with these positions are taken out of normal flow and placed above or below static elements.

Here's a brief note comparing "visibility" and "display".