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/