CSS display and visibility properties
The display and visibility properties are used to show or hide HTML elements in web pages. If both are used to hide or show elements then what is the difference between the two?
To understand that, see the figure below where I have used three div elements.
Three div elements are used that are shown in section 1 (from the left side). Initially, all div elements are shown without using the display or visibility properties.
The second part, above section 2 in the figure is showing only DIV 1 and DIV 3. The DIV 2 is given the visibility: hidden value, however, you can see the space of DIV 2 is still occupied.
The third part, above section 3 is also showing only DIV 1 and DIV 3 while the DIV 2 is hidden by using the display: none property. You can see the difference; the DIV 3 is moved up and DIV 2 is not occupying any space.
Syntax of CSS visibility
This is how you can use the CSS visibility property:
1 visibility: hidden;
The default value of the visibility CSS property is visible. You can also use:
1 visibility: collapse;
This is used in the HTML table, an example of which is shown in the later part of this tutorial.
Syntax of display
The syntax to use display property is:
1 display: none;
This will hide the element where this property is used. Like I used in the DIV 2 element in the intro section.
The display CSS property is also used to change the behavior of the inline or block elements e.g.
1 display: inline;
This will change the behavior of a block element to an inline element. For example, div is a block element. By using the display: inline for div element, it will behave like an inline element.
1 display: block;
Using the block value makes the opposite. For example, the span is an inline element. It will behave like a block element if the block value is used in display property.
The examples are shown below.
In this demo, I have used a div element that contains unordered list <ul>, list items and hyperlinks. The links act as the menu items.
Apart from other CSS properties, that are many to design this menu, the display property is not used initially, that means the menu will be visible.
Two links are given after the menu: hide menu / show menu. As you click on the hide menu link, the jQuery code will be used on the click event of that link to add: display: none property to the parent div.
As such, the parent div contains the menu, which is the combination of ul, li and <a> elements. By using display: none, the div will be hidden and so the whole menu as well. As menu disappears, the links will move up, occupying the space of the menu because CSS display property does not occupy the element space after display: none is used.
If you click the show menu link after that, the jQuery query code will add the display: initial value. This will make the menu visible again and links will move down.
I will use the same example as above, but this time using the CSS visibility property to show and hide the menu. The difference is just the jQuery part, where I will use the:
as you click on the “hide menu” link while visibility: visible as you click the “show menu” link.
You can see the difference, here again, as you click on the hide menu link, the menu will disappear just like the display property. However, the links and paragraph text will stay at its place and will not move up.
A CSS visibility and display example with HTML table
In the following example, an HTML table is created with the Bootstrap framework. The table contains five rows initially that are displayed. The initial table look is as follows:
The table rows are using different bootstrap classes to style it e.g. danger, active, warning etc. You can see the table rows are numbered from 1 to 5 (the first column from left).
Now, first I will use the visibility property on the second row to hide it. This will be used as follows:
As such, the collapse value also used for table elements. It is used to remove a row while table structure does not effect. See the figure below and demo online by clicking the link below:
You can see the second row is not visible; however the table structure remains the same.
Note that, if you use the collapse value for any other elements, it will be rendered as hidden value.
A table with CSS display property
Now, the same example as above except I will use the display property to hide the row in the Bootstrap designed table.
See the output and code by clicking the links below:
You can see, the second row is disappeared while the third row is moved upward to occupy the space of the second row.
Using display for inline elements
As such, the CSS display property is used to change the behavior of inline and block elements.
If you have no idea, the block elements take full available space and starts at a new line. For example, paragraphs, div are the block elements.
While the inline elements only take the required space and do not start at the new line. Examples of inline elements are the span, link tag etc.
The display property allows us to change the behavior of inline and block elements by using these values:
To change a block element to inline:
To change an inline element to block element:
In the following example, a span element is changed to a block element. And a paragraph is changed to inline element by using the display CSS property.
To understand the difference, first have a look at this figure and online demo without using display property:
The demo page is showing a parent div, a span and a paragraph inside that div. Initially, the behavior is kept normal where you can see:
- The div is outlined with black that occupies the full available width.
- The span in blue, inside the div, is only taking its used space and starting at the same line.
- The paragraph which is red is also taking the full space and started at the new line.
Now, I will change the span to a block element and paragraph to an inline element by using the display property. The parent div will remain the same. See the output and live demo:
You can see, the span is started at a new line and paragraph’s border is also ended where the text is ended. It did not take the full available width like the div or span.