Software, your way.
burger menu icon
WillMaster

WillMaster > LibraryWeb Page and Site Features

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!

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

Was this article 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 Library articles is presented AS-IS.

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.

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

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