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."
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" }
- What is the DOM?
- Add elements to the DOM
- Hiding/ showing elements
- Animation in the DOM