LearnKode

2 Example(s) of JQuery Show


Description :

In this example, we are going to display the hidden text with the help of show() function and the speed is set to slow.


JQuery Show 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').show('slow');
            });
        });
    </script>
</head>

<body>
    <p style="display:none">Hidden Text</p>
    <p>Click Show button to display hidden Appwrk text</p>
    <button class="hide">Show</button>
</body>

</html>
Try it » Download Example »

Output

Description :

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


JQuery Show 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;
 display: none;
 }
button{
    font-size: 19px;
   height: 40px;
   width: 250px;
   border: 1px solid black;
  border-radius: 10px;
   background-color: aqua;
        }
        </style>
        
<script>
$(document).ready(function(){
$(".showbtn").click(function(){
    $("img").show(2000,"swing",function(){
      alert("Show() method is finished!");
    });
  });
});
</script>
</head>
<body>
        <h1 style="color:fuchsia">Click to the button and then see</h1>
	<button class="showbtn">Show 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