Categories:

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"
}