Hide and Reveal Content, On Demand: How It Works

CSS is the key.

With CSS, everything (a character, an image, a paragraph) within a DIV tag, can be given "properties".

An example of a property is "font-size". Properties are given values. (ie font-size: 24px)

A nice feature of CSS is the "display" property. This property is used to display (or remove from view) content within the page depending on pre-defined actions of site visitors.

Although the "display" property has many possible values, we will use only two for this project. These values are "none" and "" (the last is a null value, two quotation marks in succession). The "display" property "none" value causes the content not to be displayed, or removed, if it's already displayed. The "" value causes the content to be displayed.

Here is how the "none" value is specified in CSS:

display: none;

The "" value is specified by omitting the "display" property altogether.

Here are two examples in DIV tags.

The first example will display. The second will not.

<div id="abc" style="font-size: 24px;">
Hello!
</div>
<div id="xyz" style="font-size: 24px; display: none;">
Good-bye!
</div>

Give the above a try. Pop the HTML into an example web page and load it into your browser. You'll see "Hello!" but you won't see "Good-bye!"

The ID attributes in the DIV tags are there so JavaScript can change the "display" property.

JavaScript is the switch.

JavaScript is used to display and remove content by changing the value of the CSS "display" property. Below is an example JavaScript. (I'll show you how to run the JavaScript in a moment.)

<script type="text/javascript" language="JavaScript"><!--
function RemoveContent(d) {
document.getElementById(d).style.display = "none";
}
function InsertContent(d) {
document.getElementById(d).style.display = "";
}
//--></script>

Put the JavaScript on the example web page you made with the two example DIV tags. The JavaScript can be in the HEAD or BODY area of the web page, above or below or between the DIV tags — whatever location makes sense to you.

When the JavaScript is called, the DIV to remove or the DIV to display are specified in the link. Here are the HTML links to do it:

<a href="javascript:RemoveContent('abc')">
Remove Hello!
</a><br>
<a href="javascript:InsertContent('xyz')">
Insert Good-bye!
</a><br>
<a href="javascript:RemoveContent('xyz')">
Remove Good-bye!
</a><br>
<a href="javascript:InsertContent('abc')">
Insert Hello!
</a>

Put the links somewhere on your example web page. (If you put them below the example DIV tags, you'll see how the link text is pushed down to make room when content is inserted above it.)

The Quick 'N Easy Layer Show/Hide article provides copy 'n paste code for many hide/display requirements.

Will Bontrager