Hide and Display Content On Demand
You may have encountered web pages where an action on your part (like clicking a link or checking a checkbox or moving the mouse over a certain part of the web page) inserted causes additional content to appear on the page. The website may have made it possible for another action to remove the content.
When the content appears, previously existing content is shifted around to make room for the new.
Images, iframes, forms, tables, text — all these visual elements can be inserted into and removed from web pages when the site visitor does predefined actions.
(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.)
Copy 'n paste code for a number of different predefined actions and types of content are linked from this page.
Examples I've found on the 'net are horrifyingly complex. This article and the code at the above URL attempt to make it simple for anyone comfortable working with CSS and JavaScript. Those who are not yet so comfortable may find this article assists progress in that direction.
CSS is the key.
With CSS, a character, an image, a paragraph, everything within a DIV tag, or so forth, can be given what are called properties.
An example of a property is "font-size". Properties can be given values.
An example of a "font-size" value is "24px" (meaning 24 pixels).
The way the above "font-size" property and "24px" value are specified in CSS is like this:
font-size: 24px;
Happily, CSS has a "display" property. And this property is used to insert or remove 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. And the "" value causes the content to be displayed.
This is how the "none" value is specified in CSS:
display: none;
The "" value is specified by omitting the "display" property altogether.
Below are two examples in DIV tags.
The first 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 acts as 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 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.)
Play with it. You'll quickly gain an idea of how it works.
For many more examples, along with copy 'n paste code, see Hide and Reveal Content, On Demand .
If you know exactly what you want to accomplish, it might be there, or something close enough that some simple modification can perfect it.
If you're just looking, the examples may provide the idea that will enhance your website.
Will Bontrager
