Checkbox to Show/Hide Content

You can show or hide content when a checkbox is checked or unchecked.

Any web page content that can be put into a div (or span or p or other HTML container tag) can be displayed or undisplayed with a check or uncheck of a checkbox. Images, videos, forms and text content can be in the div.

Unless otherwise mentioned, referring to a div in this article can apply as well to other HTML containers.

This article arose from a comment at the "Was this article helpful to you?" box at the bottom of the Controlling Checkboxes With JavaScript article.

(Note: See the related Powerhouse JavaScript Function for Show/Hide article for a central function to control virtually all general hide/show requirements you may have.)

How It Works

There are two divs with content. When the checkbox is clicked to check it, the content of one div is displayed and the other undisplayed. When the checkbox is clicked to uncheck it, the display switches.

The display or undisplay happens only when the checkbox is clicked.

(To display nothing when unchecked, make the "unchecked" div an empty div so when it displays it displays nothing.)

Examples

Let's start off with two examples. Then, a description of how to implement hide/reveal functionality tied to whether or not a checkbox is checked.

Example 1

When you check the checkbox, an image with a check mark is revealed. When you uncheck the checkbox, a different image is revealed.

Neither image will appear until the checkbox has been clicked the first time.

Click the checkbox to reveal an image with a check mark. Uncheck to reveal a different image.

Example 2

When you check the checkbox, text appears indicating that the checkbox is checked. When unchecked, the text indicates an unchecked checkbox.

As with the previous example, neither will appear until the checkbox has been clicked the first time.

The source code of this example 2 is used in the instructions.

How to Implement It

Implementation consists of two parts, the JavaScript and the HTML.

Here's the JavaScript. No customization required.

<script>
function DoCheckUncheckDisplay(d,dchecked,dunchecked)
{
   if( d.checked == true )
   {
      document.getElementById(dchecked).style.display = "block";
      document.getElementById(dunchecked).style.display = "none";
   }
   else
   {
      document.getElementById(dchecked).style.display = "none";
      document.getElementById(dunchecked).style.display = "block";
   }
}
</script>

Paste the JavaScript in the source code somewhere below where the checkbox and related show/hide divs will be. Immediately above the cancel body tag would work.

Here's the source code for the checkbox and the show/hide divs. Customization notes follow.

<div>
Check/uncheck: 
<input type="checkbox" onclick="DoCheckUncheckDisplay(this,'checkbox-checked','checkbox-unchecked')" style="margin:0;">
</div>

<div id="checkbox-checked" style="display:none; color:green;">
The checkbox is checked.
</div>

<div id="checkbox-unchecked" style="display:none; color:red;">
The checkbox is unchecked.
</div>

You'll see three divs.

1. The div containing the checkbox.

2. The div containing the content to display when the checkbox is checked.

3. The div containing the content to display when the checkbox is unchecked.

Implementation Notes

1. The div containing the checkbox:
The div contains the words "Check/uncheck:". The words may be removed or changed. Also, the checkbox doesn't necessarily have to be in a div.

What is required is the checkbox field with the onclick attribute. When the checkbox is clicked, the onclick attribute calls the JavaScript function implemented earlier. Let's look at the parameters of that JavaScript function.

The parameters of the JavaScript function are this, checkbox-checked, and checkbox-unchecked:

• The word "this" in the parameter list refers to the HTML tag where the onclick attribute is located, which in this instance is the input tag for the checkbox field.

• checkbox-checked refers to the div containing the content to be displayed when the checkbox is checked. The color green is for visually correlating the parameter with the div.

• checkbox-unchecked refers to the div containing the content to be displayed when the checkbox is checked. The color red is for visually correlating the parameter with the div.

2. The div containing the content to display when the checkbox is checked:
This div has the content to be displayed when the checkbox is clicked to check it. If no content is to be displayed for a checked checkbox, leave this div empty.

The inline CSS property display is required. The style may be changed in any other ways you wish.

The id value of the div may be changed from checkbox-checked to whatever is appropriate. If the id value of the div is changed, a corresponding change needs to be made in the onclick attribute of the checkbox field.

3. The div containing the content to display when the checkbox is unchecked:
This div has the content to be displayed when the checkbox is clicked to uncheck it. If no content is to be displayed for an unchecked checkbox, leave this div empty.

The inline CSS property display is required. The style may be changed in any other ways you wish.

The id value of the div may be changed from checkbox-unchecked to whatever is appropriate. If the id value of the div is changed, a corresponding change needs to be made in the onclick attribute of the checkbox field.

Notes

Optionally, the content that displays when the checkbox is checked can also be displayed when the web page first loads. In the div with id="checkbox-checked", change the display:none; CSS to display:block;

Same with the content that displays when the checkbox is unchecked, also displaying it when the web page first loads. In the div with id="checkbox-unchecked", change the display:none; CSS to display:block;

The content to be displayed may be in widely different locations on the web page — different locations from each other or from the checkbox.

(This article first appeared in Possibilities ezine.)

Will Bontrager