Sometimes we want to hide some content at first page load to reduce bandwidth transferred to the user. Usually when we just want to show the thumbnails of the image and then the original (big) sized image hidden next to it.We could hide some element by using CSS display property set to "none" initially. In the example below, the element "spoiler" and it's content won't shows up on the browser:

<div id="spoiler" style="display:none">
  <img src="some-image.jpg" alt="One Big Image" /> Big Image!
</div>

To easily show/hide the element and it's content can be done, by executing the following javascript function:

<script type="text/javascript">
var show = function() {
  document.getElementById("spoiler").style.display = "block";
}
var hide = function() {
  document.getElementById("spoiler").style.display = "none";
}
</script>

Now, we may call the javascript functions by using the following anchor tag:

<a href="#" onclick="show()">Show!</a>
<a href="#" onclick="hide()">Hide!</a>

Have a good try!