WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

jQuery Effects - Hide and Show


Hide, Show, Switch, Slide, Blur, and Enliven. WOW!

Click to appear/cover up panel

Because time is significant, we convey speedy and simple learning.

At welookups, you can contemplate all that you have to learn, in an open and helpful format.


Examples

jQuery hide()
Shows a basic jQuery stow away() method.

jQuery hide()
Another shroud() show. Step by step instructions to conceal parts of text.


jQuery cover up() and show()

With jQuery, you can cover up and show HTML components with the stow away() and appear() methods:

Example

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

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

Syntax:

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

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

The discretionary speed parameter determines the speed of the concealing/appearing, can take the accompanying qualities: "slow", "fast", or milliseconds.

The discretionary callback parameter is a capacity to be executed after the cover up() or appear() strategy finishes (you will become familiar with callback works in a later chapter).

The following model exhibits the speed parameter with hide():

Example

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

jQuery toggle()

With jQuery, you can flip between the cover up() and appear() techniques with the switch() method.

Shown components are covered up and shrouded components are shown:

Example

$("button").click(function(){
    $("p").toggle();
});
Try it yourself »

Syntax:

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

The discretionary speed parameter can take the accompanying qualities: "slow", "fast", or milliseconds.

The discretionary callback parameter is a capacity to be executed after switch() completes.