Software, your way.
How To Get Good Custom Software
(Download)
(PDF)
burger menu icon
WillMaster

WillMasterBlog > CSS

FREE! Coding tips, tricks, and treasures.

Possibilities weekly ezine

Get the weekly email website developers read:

 

Your email address

name@example.com
YES! Send Possibilities every week!

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:

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

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

Was this blog post helpful to you?
(anonymous form)

Support This Website

Some of our support is from people like you who see the value of all that's offered for FREE at this website.

"Yes, let me contribute."

Amount (USD):

Tap to Choose
Contribution
Method


All information in WillMaster Blog articles is presented AS-IS.

Support Area — Ask Your Question Here

The "Code in articles help" forum at the Willmaster.com support area is the place to get information about implementing JavaScript and other software code found on Willmaster.com

We only suggest and recommend what we believe is of value. As remuneration for the time and research involved to provide quality links, we generally use affiliate links when we can. Whenever we link to something not our own, you should assume they are affiliate links or that we benefit in some way.

Recent Articles in the Library

Cookie Directory Protection

Protecting subdirectories with a cookie can be an especially good method when access needs to be allowed from various internet connections.

Check SSL Certificate

An easy-to-use SSL checker to see when your secure certificate expires.

Strong Form Protection From Bots

A web page form that is invisible to spam bots.

Private Internet Radio

Make your very own private internet radio. No ads, unless you insert them yourself.

Multi-Select Scrolling List Box

The only changes to the dropdown list code when making a multi-select scrolling list box is to add two attributes.

Integrated Uploader

A simple-to-install and simple-to-use file uploader.

Find Phrase

Find the files on your server that contain a specific word or phrase.

How Can We Help You? balloons
How Can We Help You?
bullet Custom Programming
bullet Ready-Made Software
bullet Technical Support
bullet Possibilities Newsletter
bullet Website "How-To" Info
bullet Useful Information List
software index page

© 1998-2001 William and Mari Bontrager
© 2001-2011 Bontrager Connection, LLC
© 2011-2024 Will Bontrager Software LLC