This is a great little piece of Javascript that I use…For showing and hiding content. By default the content is hidden untill the user clicks to enable it.

Happy Coding…

Place the content you want to be shown/hidden inside a “div” (division) html tag. Assign the tag a unique “id.”

<div id="uniqueID">
<p>This is the text I want to show and hide. </p>
</div>


Create a style for this div area with a display of none and place this in your stylesheet. Note: older browsers will ‘ignore’ a div tag, so the javascript replaces it with a switch to the ‘layer’ instead. Therefore, don’t use the div tag for any further styling, or it will be ignored (ie, centering or styles). Replace my example of “uniqueID” with your own div identifier.

<style type="text/css">
<!--
div#uniqueID
{ display: none; }
-->
</style>

Set the link to “javascript”, which will show or hide the div, depending on what state it’s in when the link is clicked. Replace my example of the parameter ‘uniqueID’ with the name of your own div identifier. The title acts like an image alt tag, so it’s not necessary to put the entire text of the link in it. And, of course, the link text is what the reader of your page will see first.

<a href="javascript:toggleLayer('uniqueID');" title="Show/Hide uniqueID">Show or Hide uniqueID </a>

Add this javascript to your external javascript file, or put the

<script type=”text/javascript”></script>

tags around it in the file with the show/hide content in it. This function should be used as is; you will not have to modify it.

function toggleLayer(whichLayer)
{
if (document.getElementById)
{
// this is the way the standards work
var style2 = document.getElementById(whichLayer).style;
style2.display = style2.display? "":"block";
}
else if (document.all)
{
// this is the way old msie versions work
var style2 = document.all[whichLayer].style;
style2.display = style2.display? "":"block";
}
else if (document.layers)
{
// this is the way nn4 works
var style2 = document.layers[whichLayer].style;
style2.display = style2.display? "":"block";
}
}