Hiding/ showing elements
Using the DOM, any visible element on the page can by dynamically hidden
or revealed with the help of the CSS properties "visibility" and "display."
Click here
Now you see me
Did ya see that? We just turned the display of the above
text to "none" to hide it, using the DOM. The code used to create the
heading is:
<div>Hiding / Showing existing elements:</div>
Here's the source code:
<a href="javascript:hideshow(document.getElementById('adiv'))">Click here</a>
<script type="text/javascript">
function hideshow(which){
if (!document.getElementById)
return
if (which.style.display=="block")
which.style.display="none"
else
which.style.display="block"
}
</script>
<div id="adiv" style="font:24px bold; display: block">Now you see me</div>
To change function hideshow() to just hide the element, so it still
occupies space in the document, you would do:
function hideshow(which){
if (!document.getElementById)
return
if (which.style.visibility=="visible")
which.style.display="hidden"
else
which.style.display="visible"
}
|
