Question

How do you use jQuery to hide an element?

How can I hide an element using jQuery? I want to make certain elements disappear from the page without deleting them, but I'm not sure which jQuery method to use or how to implement it. What's the easiest way to do this?

Answer 1

The .hide() method in jQuery animates the width, height, and opacity of the matched elements simultaneously. This essentially sets the display property of that item to none in CSS. That element will now be completely gone from the page, though its presence is still preserved for later if you wanted to show it again.

Syntax:

$(selector).hide();

Example:
You might have a button with id="hideButton". Now you want to click on it and have a paragraph appear which is originally visible and has the id="myParagraph" disappear like so:

$("#hideButton").click(function() {
$("#myParagraph").hide();
});