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
|
1 2 3 |
<p>this is a simple paragraph</p> |
JavaScript
|
1 2 3 4 |
$('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
|
1 2 3 |
<h3>This is a heading</h3> |
JavaScript
|
1 2 3 4 |
$("h3").css("display", "none"); // the first h3 element is hidden $("h3").css("display", "block"); // it will show the element that you hid earlier |
