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.

Block-level elements receive their own margins and padding (except for DIV), and can contain other block-level elements (except for paragraphs and headings).

  • H1 .. H6
  • P (paragraphs)
  • DIV
  • UL (unordered list)
  • OL (ordered list)
  • LI (list item)
  • BLOCKQUOTE
  • PRE (preformatted)
  • CODE
  • ADDRESS

In-line elements inherit their margins and padding from their parents, so they flow with the surrounding text.

  • A (anchor, usually a hypertext link)
  • IMG (image)
  • STRONG
  • EM (emphasized)
  • B (bold)
  • I (italic)
  • CITE (citation)

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.

Here's pop up window 1.

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".

Any change to the "display" property forces the browser to reformat the document. So it's a little slower.

"Visibility" renders more quickly, since the browser makes room for it on the virtual canvas only once when it first renders the page. For non-static elements, it's a good strategy.

Unless.

If you display PRE elements in your popups — computer code, for instance — and need to fiddle with "overflow" to manage horizontal viewing of wide content, then in Firefox your page may wind up a little distorted. Static elements above or below the invisibile element will often appear wrinkly (off by 1px in horizontal alignment) where they intersect the borders of the invisible element.

Display avoids this issue, since "display:none" removes the element from the virtual canvas entirely.

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".