jQuery Hide Examples

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/

Vinish Kapoor

An Oracle Apex Consultant, Oracle ACE, and founder of foxinfotech.in and orclqa.com a question and answer forum for developers.

This Post Has One Comment

  1. MAHENDRA MOHAN PARDESHI

    Your comment is awaiting moderation.

    oracle apex is little nice in Reporting
    but suppose I want to print 4/5 line on top of each page as a HEADER at LHS
    and RHS date and and Page no/total page
    that how to do it in interactive report / classic report

Comments are closed.