Hide / Show Demo

This technique exploits the 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:

This style rule defines a "hidden" class. This class will be assigned to the DIVs that will mimic popup windows. "Position: absolute" allows them appear over the top of regular text when they're unhidden.

.hidden {visibility: hidden; position: absolute; }

(Not shown are style rules for color, background, margins, padding, and font.)

By assigning a unique ID to a hidden DIV, we can reference the visibility of the DIV using javascript.

<div class="hidden" id="w1">

(In English) Identify this section of the document as "w1", and give it the same style used for other "hidden" sections.

This function does all the work. It finds our element and changes its visibility. (Roll over highlighted text for more notes.)

function showDiv(divID,show) {"divID" and "show" are placeholders.  They get their 
values ("w1" and 1) from the "href" link below.

Other links can call "showDiv" with different 
values, so, this little function can show
and hide all the windows on your page.
  var w=document.getElementById(divID); This line creates a variable named "w" pointing
at our DIV.  We're relying on the DOM to find
it for us through its "getElementById" method.  
Literally, locate 'w1' and make "w" refer to it.

  w.style.visibility=(show==1)?'visible':'hidden'; This alters the visibility of our element. If
"show" equals 1, set visibility to 'visible', 
otherwise, to 'hidden'. 

(Other styles are fair game here, too.  You 
could set margins to 20 pixels wide with:
  w.style.margin = '20px';  
Neat, huh?)
}

The "href" below feeds "showDiv" the name of the DIV we want to control ('w1'), and whether to show or hide it. (1=visible, anything else=hidden.)

<a href="javascript:showDiv('w1',1)">

The "close" link on this window sets "show" to 0 — showDiv('w1',0) — causing "showDiv" to hide this window.

(The roll-overs in this window are more of the same — except that "showDiv" is called by "onMouseOver" and "onMouseOut" events.)

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=utf-8" />
  <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; } 
  </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>

Popup Windows Using CSS-2 & Javascript