Subscribe to
the Possibilities Ezine

Subscription Terms of Service
Privacy Policy

RSS feed links

Blog Article Categories

Automation

CGI

Content Protection

CSS

Debugging

HTML

JavaScript

Perl

PHP

Recommendations

Related Sites

Statistics

Web Development

Web Site Maintenance

Misc

Show/Hide a Div Content Layer

By Will Bontrager

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:

Title/Link	Displays on top of or within existing content		Location where layer will display
	On top	Within	At natural location	Specified in div tag	Bottom-right of cursor
Floating Layer At Cursor Position	Yes	—	—	—	Yes
Show/Hide a Div Content Layer	Yes	—	—	Yes	—
Quick 'N Easy Layer Show/Hide	—	Yes	Yes	—	—

This is the "Show/Hide a Div 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>

March 15, 2006

Please note: Articles on this website are presented "as is". However -

If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.

© 1998-2001 William and Mari Bontrager
© 2001-2008 Bontrager Connection, LLC