Today is . Page created 04/05/07

Appear Show-Hide Material Hiding

[ Show Material ] [ Hide Material ]

This is an incredibly simple piece of javascript/dhtml coding, using one small javascript function placed in the HEAD of the html document, which changes the 'visibility' property of the specified DIV object. Using the visibility property of the DIV tag, means that anything placed between these tags can be hidden or shown whenever neccessary. Making it a potentially very powerful tool in the design of dynamic, interesting webpages. Allowing the user to experience greater interaction with the website.

We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy three (3) part copy and paste code that goes in both the <HEAD> (no reconfigurations) section and <BODY> section (two parts) of your document.

The first part of the <BODY> section is basically the link so to speak to either "Show" or "Hide" the material. All you can do here is change the words to suit your needs.

<div id="control" style="position:relative;visibility:visible">
<a href="javascript:popUp('code',true);">Show Material</a>
<a href="javascript:popUp('code',false);">Hide Material</a>
</div>

Here you either "Show" or "Hide" the material. All you can do here is change the words to suit your needs. "Do Not" remove the closing </div> tag

The second or last part of the <BODY> section is to reconfigure the cosmetic appearance of the style sheet and to add your material.

Default

<div id="code" style="position:relative;visibility:hidden;background:lightblue; border:double;border-width:1px;padding:10px;">

Your Material Goes Here

</div>

Our Reconfigurations

<font face="arial,georgia,helvetica"size="2"color="#dda0dd">

<div id="code" style="position:relative;visibility:hidden;background:black; border:double;border-width:4px;padding:0px;">

Your Material Goes Here
</font>
</div>

Define Reconfigurations

  • background:lightblue; This denote the background color of the effect when visible.
  • border-width:1px; This denotes how wide* the border around the effect is when visible.
    * In order to actually see the double border effect you should have this set for at least 3. Anything less you will only see a single border.
  • padding:10px; This denotes how much blank space there will be below the effect. The higher the number the more blank space there will be. This is why we have ours set to 0 to conserve blank space and not have that much of a void when not visible. The blank space also has a direct effect on how much material you have that you want included into the effect.
  • <font face="arial,georgia,helvetica"size="2"color="#dda0dd">
    We added a complete font tag into the effect for a specific reason. By default, the border and font color will be that specified within your <BODY> tag. We decided that by adding the font tag, we had more control over the cosmetic appearance of color, font face etc.
  • </font> We closed the font tag for the simple reason since we added a font tag, it must be closed when finished.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]