jQuery Hide And Show Effect Methods

1. jQuery Hide/Show Effects Overview

jQuery hide and show effect methods let you control element visibility with minimal code. Use them to instantly hide, reveal, or toggle any element on your page without writing complex JavaScript.

1.1. jQuery Visibility Methods

jQuery offers three main methods to set and manage the visibility state of any element.

• hide() – Hide elements
• show() – Reveal elements
• toggle() – Toggle visibility

2. jQuery hide() Method

The hide() method hides the selected element(s) by setting their display property to none. You can pass an optional duration (milliseconds or keywords like "slow"/"fast") and a callback function.

2.1. Syntax

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

2.2. jQuery hide() No Duration

Click button to hide the box without any animation and duration.

$('#box').hide();

2.3. jQuery hide() Using Milliseconds

Click button to hide the box in 300 Milliseconds.

$('#box').hide(300);

2.4. jQuery hide() Using slow/fast Keywords

Click button to hide the box slowly or fast.

$('#box').hide('slow');  // 600ms
$('#box').hide('fast');  // 200ms

2.5. jQuery hide() With Callback

Hide the box and trigger a callback message by clicking the button.

$('#box').hide(400, function () {
    $('#message').text("Box is hidden");
});

3. jQuery show() Method

The show() method reveals hidden element(s) by restoring their display property. Like hide(), it accepts an optional duration and callback.

3.1. show() Syntax

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

3.2. jQuery show() No Duration

Click button to show the box without any animation and duration.

$('#box').show();

3.3. jQuery show() Using Milliseconds

Click button to show the box in 300 Milliseconds.

$('#box').show(300);

3.4. jQuery show() Using slow/fast Keywords

Click button to show the box slowly or fast.

$('#box').show('slow');  // 600ms
$('#box').show('fast');  // 200ms

3.5. jQuery show() With Callback

Show the box and trigger a callback message by clicking the button.

$('#box').show(400, function () {
    $('#message').text("Box is Displayed");
});

4. jQuery toggle() Method

The toggle() method toggles the visibility of the selected element(s). If the element is visible, it will hide it; if hidden, it will show it. Like hide() and show(), it accepts an optional duration and callback.

4.1. toggle() Syntax

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

4.2. jQuery toggle() No Duration

Click button to toggle the box instantly without any animation.

$('#box').toggle();

4.3. jQuery toggle() Using Milliseconds

Click button to toggle the box in 300 milliseconds.

$('#box').toggle(300);

4.4. jQuery toggle() Using slow/fast Keywords

Click button to toggle the box slowly or fast.

$('#box').toggle('slow');  // ~600ms
$('#box').toggle('fast');  // ~200ms

4.5. jQuery toggle() With Callback

Toggle the box and trigger a callback message.

$('#box').toggle(400, function () {
    $('#message').text("Toggled!");
});