jQuery effect - hide and display

May 07, 2021 jQuery

jQuery effect - Hide and display

In jQuery, you can use the hide() and show() methods to hide and display HTML elements, as well as the toggle() method to switch between the hide() and show() methods.

Hide, show, switch, slide, fade in and out, and animate, wow!

Click the Show/Hide panel

Because time is precious, we provide fast and convenient learning methods.

At W3CSchool, you can learn what you need.

jQuery hide()
A simple jQuery hide() method demo.

jQuery hide()
Another example of hide(). Demonstrates how to hide text.

jQuery (hide) and show ()

With jQuery, you can hide() and show() methods to hide and display HTML elements:

$("#hide").click(function(){
$("p").hide();
});

$("#show").click(function(){
$("p").show();
});

Try it out . . .

Grammar:

$( selector ).hide( speed,callback );
$( selector ).show( speed,callback );

The optional speed parameter specifies the speed of hiding/displaying, and the following values can be taken: "slow," "fast," or milliseconds.

The optional callback parameter is the name of the function executed after hiding or displaying.

The following example demonstrates the hide() method with the speed parameter:

$("button").click(function(){
$("p").hide(1000);
});

Try it out . . .

jQuery toggle()

With jQuery, you can use the toggle() method to switch between the hide() and show() methods.

Displays hidden elements and hides displayed elements:

$("button").click(function(){
$("p").toggle();
});

Try it out . . .

Grammar:

$( selector ).toggle( speed,callback );

The optional speed parameter specifies the speed of hiding/displaying, and the following values can be taken: "slow," "fast," or milliseconds.

The optional callback parameter is the name of the function executed after the toggle() method is completed.

Optional callback parameter with three points of instruction:

If the number of elements selected by selector is n, the callback function executes n times
The callback function name is parenthesed and the function body is executed immediately, rather than waiting until the display/hide is complete
Callback can be neither a function name nor an anonymous function

jQuery effect - hide and display

Table of contents