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 web
site 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.
Copy 'n paste code for a number of different predefined
actions and types of content are linked from the
/a/new/pl.pl?hidedisplay web 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
the /a/new/pl.pl?hidedisplay web page.
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 web site.
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
©2005 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.
