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.)
Refer to these working examples, with copy and paste code, for additional detail.
-
Basic example:
New content is revealed when a link is clicked.
-
New content is revealed when the visitor's mouse hovers over a link.
-
A "[Read More]" link
is clicked to reveal new content.
When new content is inserted, the "[Read More]"
link is changed to "[Read Less]"
-
An IFRAME is revealed when the "[View IFRAME]" link is clicked.
-
A button is clicked to reveal a subscription form.
Question:
Did you find this article interesting and understandable? How can it be improved?
Your response is anonymous.
When done typing, click anywhere outside the box. [more info]
Will Bontrager
© Bontrager Connection, LLC
Please note:
Articles on this website are presented "as is". However -
If you have a question about a CGI script, HTML, CSS, PHP, or JavaScript
Ask one of our Experts and you'll have your answer!
Click here for details.
