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

Quick 'N Easy Layer Show/Hide

By Will Bontrager

This post shows how to hide content that becomes visible when a link is clicked or mouse hovers over it.

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 "Quick 'N Easy Layer Show/Hide" article.

If you've been holding off on creating sections of your web page to show or hide on demand because you were uncertain exactly how to implement it, hold off no more.

This is what I'm referring to:

Click here to show/hide example text.

The JavaScript is copy 'n paste ready. It includes functions to show/hide, like the above example text, and also functions to only show and to only hide.

This is the JavaScript:

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

Now, we'll talk about how to prepare the content and the link(s).

Prepare the content like this:

<div id="uniquename" style="display:none;"> <p>Content goes here.</p> </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="display:none;" hides the content when the web page first loads. If you want to show the content when the web page first loads, remove that attribute from the div tag.

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 when clicked:

   <a href="javascript:ShowContent('uniquename')"> Click to show. </a>

2. Use this link to hide content when clicked:

   <a href="javascript:HideContent('uniquename')"> Click to hide. </a>

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

   <a href="javascript:ReverseDisplay('uniquename')"> Click to 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.

Once you've implemented it a time or two, you'll see how easy it really is.

1. Paste the JavaScript into the web page.
2. Specify content within a div.
3. Create a link to show or hide or show/hide the content.

And that's it :)

One more thing:

If you wish to let the show/hide occur when the mouse hovers over the link, instead of occurring when the link is clicked, add an onmouseover attribute to the link and give the href attribute a URL. Example:

<a onmouseover="ReverseDisplay('uniquename'); return true;" href="http://example.com/page.html"> [Show/Hide Stuff] </a>

If no URL is desired for the link, "#" can be used instead.

January 30, 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