Home » jQuery » jQuery Hide Examples

jQuery Hide Examples

By

Using jQuery, you can use hide(), slideUp(), fadeOut(), and css() methods to hide an HTML element. Below are the examples:

Hiding a Div using hide() Method

In jQuery, to hide an HTML element, you need the static ID or the element name itself, for example, "p" (for paragraph), "button" (for a button) to supply to the hide() method. Below is the complete example of HTML and jQuery code to hide a Div having ID "myDiv" on a button click:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#mybtn").click(function(){
$("#myDiv").hide();
});
});
</script>
</head>
<body>
<div id="myDiv">
<p>If you click on the "Hide" button, I will disappear.</p>
</div>
<button id="mybtn">Hide</button>
</body>
</html>

Hiding an HTML Element Using slideUp() Method

You can also hide an HTML element using the slideUp() method. The difference is it animate slides up before hiding. Below is an example:

<script>
$(document).ready(function(){
$("#mybtn").click(function(){
$("#myDiv").slideUp();
});
});
</script>

Using fadeOut() Method

Similarly, you can use the fadeOut() method, and it will hide using the fade animation. Below is an example:

<script>
$(document).ready(function(){
$("#mybtn").click(function(){
$("#myDiv").fadeOut();
});
});
</script>

Hide an Element Using the css() Method

The below example will hide the Div, but the blank space will still be visible.

<script>
$(document).ready(function(){
$("#mybtn").click(function(){
$("#myDiv").css("visibility", "hidden");
});
});
</script>

If you want to hide the space as well, check the following example:

<script>
$(document).ready(function(){
$("#mybtn").click(function(){
$("#myDiv").css("display", "none");
});
});
</script>

Ref. https://api.jquery.com/hide/