Hiding or showing a element on web page, without any server-side code can also be done from CSS by using the visibility property and giving it a value of either visible or hidden to show or hide the element.
When a certain element is set to hidden, a placeholder (blank block the size of the original one) will appear so no, setting a block to hidden won’t break your design. Notice how the buttons in the example below don’t change their place even though the text above can disappear and appear back.
It’s values are discussed as
| Value | Description |
| visible | The element is visible. |
| hidden | The element is invisible (but still takes up space) |
| collapse | Only for table elements. Removes a row or column, but not the table layout. The space taken up by the row or column will be available for other content. |
This property is used as
h2 { visibility:hidden; }
The visibility property has the ‘visible’ value as its default value.
Hiding an element can be done by setting the display property to “none” or the visibility property to “hidden”. However, notice that these two methods produce different results:
visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
