Display none opposite in CSS

In this article, I show you how to use display none in CSS and what is the display none opposite in CSS.

Let’s first understand what is display none property what it actually does.

Display none opposite

 

display none in CSS

The display none property in CSS is used to hide any element. Suppose you have one div on your page and you want to hide the same using CSS.

First, get the div using its ID or class. Suppose we have below div –

<div id="container" class="product">
 <h2>display none opposite</h2>
</div>

To hide this div using its ID or class use the below code –

#conatiner{

display:none;

}

.product{

 display:none;

}

# is used to get the element by its ID and “.”(Dot) is used to get the element by class name.

Display none opposite in CSS

Now you have to display the already hidden element using the CSS. Then use display: block that’s the display none opposite –

#container {

display:block;

}

.product{

 display:block;

}

The display: block CSS property displays the element on-page. This is useful when you have to show a hidden element.

You can also use display: initial to show an element if the element initial state is block means if you explicitly hide the element and want to display it again then use display: initial.

The display property decides how the element will display using the CSS on the page there are many different values the display property has like – none, block, inline, inline-block.

Visibility: visible or hidden And Display: block or none is same?

No these are altogether different although display: none and visibility: hidden hide the elements on the page but in visibility hidden the element takes up space on the page so visibility: hidden is not opposite to display none in CSS.

We have hide() and show() methods in jquery that are equivalent to display: none and display: block respectively.

Conclusion

So the display none opposite in CSS is display: block that displays the Html element on the page. You can use display: block as the display none opposite.

Posted in css