jQuery hide/show Effect

jQuery provides a interface for doing various kind of amazing effects like Slide, Fade, Hide, Show, Toggle Effects and Animate.

jQuery hide() and show()

Using the jQuery show() and hide() methods, you can show and hide the HTML elements. Syntax:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds. callback: Callback is an optional parameter. It represents a function to be executed after the completion of the hide or show method.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("#hide").click(function(){  
        $("p").hide();  
    });  
    $("#show").click(function(){  
        $("p").show();  
    });  
});  
</script>  
</head>  
<body>  
<h2>Heading 1</h2>  
<p>I will disappear if you click on the "Hide" button.</p>   
<button id="hide">Click on Hide</button>  
<button id="show">Click on Show</button>    
</body>  
</html>
Try Now

jQuery toggle()

The jQuery toggle() method is used to make toggle between the hide() and show() method. It hides the shown element and shows the hidden elements. Toggle() method is used to check the selected elements for visibility. If an element is hidden then show() is run and if an element is visible then hide() is run. Syntax:
$(selector).toggle(speed, callback);
speed: Speed is an optional parameter. It is used to specify delay. Its value can be fast or slow and it is defined in milliseconds. callback: Callback is an optional parameter. It represent a function to be executed after the completion of the toggle() method.

Example:

<!DOCTYPE html>  
<html>  
<head>  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>  
<script>  
$(document).ready(function(){  
    $("button").click(function(){  
        $("p").toggle();  
    });  
});  
</script>  
</head>  
<body>  
<h2>This is the heading</h2>  
<p>This is the first paragraph.</p>  
<button>Toggle between hide() and show()</button>  
</body>  
</html> 
Try Now 



ADVERTISEMENT
ADVERTISEMENT