JJavaScript

2 Methods to Set Display None CSS Property in jQuery

We can hide any HTML element by using any one of the two methods in jQuery. You may either call the hide() method or the css() method to hide an element from the user viewpoint. Both the methods are almost the same and are used to set the display none property in jQuery.

Method 1: Using jQuery hide() Method

You can hide any element using the jQuery hide() method.

Example

HTML

<p>this is a simple paragraph</p>

JavaScript

$('p').hide(); // the first p element is hidden
$('p').show(); // it will show the element that you hid earlier

Method 2: Using jQuery css() Method

We know that the CSS display property is used to hide or show an HTML element. We can use the jQuery css() method to set the display property to none in order to hide an element.

Example

HTML

<h3>This is a heading</h3>

JavaScript

$("h3").css("display", "none"); // the first h3 element is hidden
$("h3").css("display", "block"); // it will show the element that you hid earlier