LearnKode

2 Example(s) of JQuery Hide


Description :

In this example, we are going to hide the text of <p> tag using hide() function.


JQuery Hide Example - 1 
<!DOCTYPE html>
<html>

<head>
    <title>Welcome to LearnKode - A code learning platform</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".hide").click(function() {
                $("p").hide();
            });
        });
    </script>
</head>

<body>

    <p>Click hide button to hide this text</p>

    <button class="hide">Hide</button>

</body>

</html>

<!-- In this example, we are going to hide the text of <p> tag using hide() function. -->
Try it » Download Example »

Output

Description :

In this example, we are going to show that we are using the hide method and it applies to the Appwrk logo image. When we will Click on the button, it will hide the logo and show an alert box that is applied on a callback function.


JQuery Hide Example - 2 
<!DOCTYPE html>
<html>
<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<style>
 img{
 width: 500px;
 height: 200px;
 }
button{
    font-size: 19px;
   height: 40px;
   width: 250px;
   border: 1px solid black;
  border-radius: 10px;
   background-color: aqua;
}
 </style>
        
<script>
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("img").hide(1000,"swing",function(){
      alert("Hide() method is finished!");
    });
  });

});
</script>
</head>

<body>
        <h1 style="color:fuchsia">Click to the button and then see</h1>
	<button class="hidebtn">Hide Appwrk-logo</button><br>
    <img src="https://appwrk.com/wp-content/themes/appwrk_theme/images/logo-dark.png">
</body>
</html>
Try it » Download Example »

Output