The following code is placed in the <head> section of the html file:
<script> // This function sets the display property to "none" function displayNone(){ document.getElementById("box").style.display = "none"; } // This function sets the display property to "block" function displayBlock(){ document.getElementById("box").style.display = "block"; } </script>
The above example uses two functions, one to make the change and one to change it back. This isn't the most efficient way of doing it but it is the simplest.
The object (element) you want to change is identified by an ID. Remember, this is unique to that object. In this example, the element containing the code above has been given the ID "box" and the opening tag looks like this: <pre id="box">.
The script is run by clicking a link. Here's the code:
<a href="javascript: displayNone()">Hide</a>
Try the links below to see what happens.