This technique exploits the CSS visibility property of elements in the DOM to hide and reveal sections of text. (The previous "DOM" is just such a link. Go on. Give it a click.)

This trick relies on 3 things:

You put it all together, and you need something like the following. You can copy it and start experimenting, if you like, adding your own styles for background, border, padding, etc.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  <title>Hide / Show demo</title>

  <script language="JavaScript">
    function showDiv(divID,show) {
      var w=document.getElementById(divID);
      w.style.visibility=(show==1)?'visible':'hidden';
    }
  </script>

  <style type="text/css">
    .hidden {position: absolute; left: 10%; visibility: hidden; margin-right: 10%; 
             background: #ffd; border: 1px solid maroon; padding: 20px; } 
    .btn {float: right; margin: 0px; padding-left: 1em; } 
  </style>
</head>

<body>
  <div class="hidden" id="w0">
    <p class="btn"><a href="javascript:showDiv('w0',0)">close</a></p>
    Hidden text goes here.
  </div>

  <p>This is the regular text.
    Click <a href="javascript:showDiv('w0',1)">here</a> to display hidden text. 
  </p>
</body>
</html>

For a more sophisticated treatement of this basic approach see Pop-Ups Revisited.

For further adventures with the DOM, click here.