Quick 'N Easy Div Show/Hide

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:

This is the "Quick 'N Easy Div 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.

The content to show and hide can be in any HTML container — div, p, li, td, and pre, as examples — or only in the BODY area without being in another container tag.

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 :)

A few more things:

Thing 1 —

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.

Thing 2 —

To make the clicked link disappear at the same time the previously-hidden content is revealed, something like this can be done.

<span id="link-id" style="display:inherit;">
<a href="javascript:ShowContent('content-id');HideContent('link-id')">
[Reveal Content]
</a>
</span>

<div id="content-id" style="display:none;">
Content to reveal
</div>

(The above added after article was written in response to a question received via the "Was this post helpful to you?" comment box at the end of each article.)

Thing 3 —

To manage more than one div at once, showing one and automatically hiding the others, see the Managing Several Show/Hide Divs blog post.

Thing 4 —

To manage more than one div at once, showing/hiding all divs with one click, see the Showing/Hiding All Show/Hide Divs At Once Willmaster Library article.

Will Bontrager