Hide and Display Text with DHTML
You can hide and display text and other elements using the CSS visibility attribute.
I'm shy - let me hide in peace!
The following code can be used to perform the above miracle:
<script type="text/javascript" language="JavaScript">
<!--
function display(element) {
if (document.layers && document.layers[element] != null)
document.layers[element].visibility = 'visible';
else if (document.all)
document.all[element].style.visibility = 'visible';
}
function hide(element) {
if (document.layers && document.layers[element] != null)
document.layers[element].visibility = 'hidden';
else if (document.all)
document.all[element].style.visibility = 'hidden';
}
//-->
</script>
<style type="text/css">
.hideDisplayStyle {
visibility: hidden;
font-weight:bold;
color:#ff9900;}
</style>
<form>
<input type="button" value="Display Text" onClick="display('toggleText')">
<input type="button" value="Hide Text" onClick="hide('toggleText')">
</form>
<div ID="toggleText" CLASS="hideDisplayStyle">
I'm shy - let me hide in peace!
</div>
The text only appears when its visibility attribute is set to visible - clicking the Display Text button calls our display function which sets the visibility attribute to visible. It dissappears when its visibility attribute is set to hidden - clicking the Hide Text button calls our hide function which sets the visibility to hidden. The text was originally hidden is because we had set the style a default visibility of hidden.