How to Show a display none Element in CSS?

The display: none; property is used to hide elements in CSS. But you might sometimes need to show such hidden elements.

One way to achieve this is to know the default display type of the element which is generally block or inline for most of the elements and then set the display property accordingly.

For eg, if the element is of block type then you should set the display property to block and if it is of type inline then set the display property to inline. This will show the hidden element without changing its defult behavior.

But, instead of searching for the default display behavior of the element, we can simply set the display property to initial.

The display: initial; will automatically set the display property to its default value based on the display type of the element.

Let’s say we have a div element in our HTML document which is hidden by applying display: none; on it somewhere in our CSS file.

So, if we want to show it, we can simply set its display property to initial. That’s it:

/* Show the hidden div */
div{
   display: initial;
}

This solution will work for all types of elements witout chaging their default behavior.

You can also manually set the display property to block or inline based on the default display behvior of the element.

/* For block level elements */
div{
   display: block;
}

/* For inline elements */
span{
   display: inline;
}

/* For inline-block elements */
button{
   display: inline-block;
}

Thanks for reading.