Showing and hiding elements

You can show and hide elements declaratively in the HTML markup or programmatically by modifying the object’s CSS properties through JavaScript.

You can create the CSS properties that show or hide an element directly in an object’s style property or in a CSS style.

The Display Property

The display property accepts three possible values:

  1. a value of inline tells the browser to show the item
  2. a value of none means the browser should hide the item
  3. a value of inherit, inherits this property from its parent element.

When you use the display CSS property and set it to the value of none, the HTML element is hidden. But hiding the element in this way also removes it from the layout.

The following code demostrates the use of the display property:

<body>
<h2>The display property"</h2>
<div id="innerDiv">          
    <p class="subPara" id='P1'>Paragraph 1</p>
    <p class="subPara" id='P2'>Paragraph 2</p>
    <p class="subPara" id='P3'>Paragraph 3</p>
    <p class="subPara" id='P4'>Paragraph 4</p>
</div>
<form>
    <button type="button" id="btnHideAnElement">Show/Hide</button>
</form>
<script>
    window.onload = function () {
        document.getElementById("btnHideAnElement").onclick = function () {
            if (document.getElementById("innerDiv").style.display == 'inline') {
                document.getElementById("innerDiv").style.display = 'none';
            }
            else {
                document.getElementById("innerDiv").style.display = 'inline';
            }
        }
    }
</script>
</body>

The Visibility Property

The second property available for controlling element visibility is called visibility. This property accepts four possible values, as outlined in Table below:

Value Effect
visible Sets the property to visible to show the element
hidden Hides the element
collapse Collapses the element where applicable, such as in a table row
inherit Inherits the value of the visibility property from the parent

Setting the visibility property to hidden hides an element, but the hidden element’s surrounding elements act as though it’s still there.

The space is maintained intact, but the element’s content is hidden. When the property is set back to visible, the element reappears exactly where it was, without affecting any surrounding elements.

The code below demonstrates the hidden and the visible effect: 

<body>
<p class="mainPara">The Visiblity Property - Hidden & Visible</p>
<ul id="unorderedList">
    <li>First List Item</li>
    <li>Second List Item</li>
    <li>Third List Item</li>
    <li>Fourth List Item</li>
</ul>
<div id="innerDiv" style="visibility: hidden">
    <p class="subPara" id="P1">Paragraph 1</p>
    <p class="subPara" id="P2">Paragraph 2</p>
    <p class="subPara" id="P3">Paragraph 3</p>
    <p class="subPara" id="P4">Paragrpah 4</p>
</div>
<button type="button" id="btnHideAnElement">Show/Hide Element</button>
<script>
    window.onload = function () {
        document.getElementById("btnHideAnElement").onclick = function () {
            document.getElementById("innerDiv").style.visibility = "visible";
            document.getElementById("unorderedList").style.visibility = "hidden";
        }
    }
</script>
</body>

The collapse value on something such as a table row, the table rows above and below collapse and take over the space that the collapsed row was occupying.

This is useful for situations where you want to have content that can be collapsed or displayed one item at a time to preserve space,

The code below demostrates the collapse effect: 

<body>
<table>
<tr> <td> Row 1 </td> </tr>
    <tr id="row2" style="background-color:#ff0000;"> <td> Row 2 </td> </tr>
    <tr> <td> Row 3 </td> </tr>
    <tr> <td> Row 4 </td> </tr>
</table>
<button type="button" id="btnHideAnElement">Show/Hide Element</button>
<script>
    window.onload = function () {
        document.getElementById("btnHideAnElement").onclick = function () {
            document.getElementById("row2").style.visibility = "collapse";
        }
    }
    </script>
</body>

Ads Right