Show/Hide a Content Layer

This post shows how to implement layers that will display content over existing content at the location specified by you.

This is one of three related posts. Each has different features. See this comparison table:

This is the "Show/Hide a Content Layer" article.

When a link is clicked or a mouse hovers over the link, content will display on top of existing content in a position and size specified in the div's style. A second click or hover will hide the div layer.

Here is the JavaScript that will be used to show/hide the floating div layer. The JavaScript is copy 'n paste ready.

<script type="text/javascript" language="JavaScript"><!--
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}
//--></script>

Prepare the content of the floating div layer like this:

<div 
   id="uniquename" 
   style="display:none; 
      position:absolute; 
      left:200px; 
      top:100px; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
Content goes here.
</div>

The "uniquename" for the id needs to be different than any other id on the web page. We'll assume an id of "uniquename" for the rest of the examples.

The style elements display:none; and position:absolute; are required, as are values for the left: and top: elements.

The other style elements in the example are optional. Additional elements may be added. The W3schools CSS tutorial is a great place to learn about what is possible.

Three different links are available. The links can be located anywhere on the web page, although near the content to be shown/hidden is the usual.

1. Use this link to show content:

   <a 
      onmouseover="ShowContent('uniquename'); return true;"
      href="javascript:ShowContent('uniquename')">
   [show]
   </a>
   
   

2. Use this link to hide content:

   <a 
      onmouseover="HideContent('uniquename'); return true;"
      href="javascript:HideContent('uniquename')">
   [hide]
   </a>
   
   

3. Use this link to hide content if it is currently showing, or show content if currently hidden:

   <a 
      onmouseover="ReverseContentDisplay('uniquename'); return true;"
      href="javascript:ReverseContentDisplay('uniquename')">
   [show/hide]
   </a>
   
   

Notice that the id's name is specified in each of the above links. Change 'uniquename' to be the id name of the content div you wish to effect.

Customizations:

The following applies to any of the above 3 link examples.

1. To remove the mouse-over functionality, remove the onmouseover attribute from the link.

2. To remove the click functionality, replace 'uniquename' with '' (two single quotes/apostrophes) from the JavaScript call in the href attribute. Example:
   href="javascript:ShowContent('')"

3. To link to another web page on the Internet when the link is clicked, replace the entire href attribute value with the URL of the page to link to. Example:
   href="http://example.com/page.html"

One more thing:

The floating div layer content itself may have a "hide" link. Example:

<div 
   id="uniquename" 
   style="display:none; 
      position:absolute; 
      left:200px; 
      top:100px; 
      border-style: solid; 
      background-color: white; 
      padding: 5px;">
<a href="javascript:HideContent('uniquename')">
[click to hide]
</a>
<p>
Content goes here.
</p>
</div>

Will Bontrager