Marusya's School Notes

Display:None vs Visibility:Hidden

This example, which also uses a javascript, demonstrates the two properties that can hide an element -- display:none; and visibility:hidden;:

HTML file:

Displayed by browser:

<script>
function removeElement() {
    document.getElementById("imgbox1").style.display = "none";
}
function changeVisibility() {
    document.getElementById("imgbox2").style.visibility = "hidden";
}
function resetElement() {
    document.getElementById("imgbox1").style.display = "block";
    document.getElementById("imgbox2").style.visibility = "visible";
}
</script>
<style>
h1.gone {
    display: none;
}
h1.hidden {
    visibility: hidden;
}
</style>

<body>
<div style="text-align:center">
  <div style="width:394px;height:160px;margin-left:auto;margin-right:auto;text-align:left;border:1px solid gray;">
    <div class="imgbox" id="imgbox1">Box 1<br>
      <img class="thumbnail" src="../html_beg/images/klematis_small.jpg" width="107" height="90" alt="Klematis">
      <input class="box" type="button" onclick="removeElement()" value="Remove">
    </div>
    <div class="imgbox" id="imgbox2">Box 2<br>
      <img class="thumbnail" src="../html_beg/images/klematis2_small.jpg" width="107" height="90" alt="Klematis">
      <input class="box" type="button" onclick="changeVisibility()" value="Hide">
    </div>
    <div class="imgbox">Box 3<br>
      <img class="thumbnail" src="../html_beg/images/klematis3_small.jpg" width="107" height="90" alt="Klematis">
      <input class="box" type="button" onclick="resetElement()" value="Reset All">
    </div>
  </div>
</div>
</body>

Box 1

Box 2

Box 3