CSS properties - visibility

revision:

visibility property

- specifies whether or not an element is visible.

Tip: Hidden elements take up space on the page. Use the "display property" to both hide and remove an element from the document layout!.

CSS syntax : visibility: visible | hidden | collapse | initial | inherit;

Property values:

visible : default value. The element is visible

hidden : the element is hidden (but still takes up space)

collapse : only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content. If collapse is used on other elements, it renders as "hidden"

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.visibility="hidden"

example: visibility property

This heading is visible

This heading is hidden

Notice that the hidden heading still takes up space on the page.

code: 
                    <div>
                        <h4 class="a">This heading is visible</h4>
                        <h4 class="b">This heading is hidden</h4>
                        <p>Notice that the hidden heading still takes up space on the page.</p>
                    </div>
                    <style>
                        h4.a {visibility: visible;}
                        h4.b {visibility: hidden;}
                    </style>