jQuery show() and hide()

show() displays a matched element and hide() hides it. With no duration they change the element immediately; with a duration they animate the transition.

Basic show() and hide() Syntax Top ↑

$("#d1").hide();
$("#d1").show();

For example, the element can be ordinary HTML:

<div id="d1" class="msg">Hide or show this layer with the buttons.</div>

Show and Hide from Button Clicks Top ↑

$("#b1").on("click", function () {
    $("#d1").show();
});

$("#b2").on("click", function () {
    $("#d1").hide();
});

Demo: show and hide with two buttons →

Use One Button Top ↑

You can keep one button and decide whether to call show() or hide() based on the current state. When you simply want to alternate states, toggle() is usually shorter.

Demo: show/hide with one button →

Add a Transition Duration Top ↑

Pass "slow", "fast", or a duration in milliseconds.

$("#d1").show("slow");
$("#d2").hide("fast");
$("#d3").show(5000);

The number 5000 is a five-second animation duration, not a delay before the effect starts.

Demo: compare slow, fast and millisecond durations →

jQuery Effects · Next: toggle() →

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author   Watch on YouTube

Connect: