jQuery / Method / .hide() - Hide Selected Elements

jQuery's .hide() conceals selected elements without removing them from the Document Object Model (DOM). With no argument it hides immediately; with a duration it changes dimensions and opacity before hiding. Once hidden, display: none removes their occupied layout space too.

Immediate hiding versus a timed effect

The .hide() documentation distinguishes the no-argument call from animation signatures. Do not assume .hide() takes 400 milliseconds: no arguments means immediate execution. The duration default of 400 milliseconds belongs to the animation form.

Duration is in milliseconds; "fast" means 200 and "slow" means 600. Timed hiding changes width, height, opacity and related properties, so surrounding layout may move. Compare .fadeOut() if an opacity-focused effect better communicates the change. Choose based on what the reader needs to understand, rather than adding motion by default.

Complete two-panel hiding and restoration example

Save the entire code as UTF-8 in hide-demo.html and open it in a browser. Internet is needed to load the official full jQuery file 4.0.0 from its content delivery network (CDN); no package installation is necessary. Do not use the slim build without effects.

Hiding, input retention, flex restoration, Show/Reset during animation and reduced-motion handling were executed with 3.7.1 and 4.0.0. Hide, Show and Reset stay outside the hidden panels, so restoration remains available.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hide and restore panels</title>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
  <style>
    body { font: 16px/1.6 sans-serif; max-width: 760px; margin: 24px auto; padding: 16px; }
    button, select, input { font: inherit; margin: 4px; max-width: 100%; }
    .panel { border: 2px solid teal; padding: 16px; margin: 12px 0; }
    #one { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
  </style>
</head>
<body>
  <h1>Hide two panels without removing them</h1>
  <label for="duration">Duration:</label>
  <select id="duration"><option value="800">800 ms</option><option value="200">200 ms</option><option value="0">Instant</option></select>
  <button type="button" id="hide">Hide</button>
  <button type="button" id="show">Show</button>
  <button type="button" id="reset">Reset</button>
  <section class="panel" id="one"><label>Note <input value="Keep me"></label><span>First panel</span></section>
  <section class="panel" id="two">Second panel</section>
  <p id="phase">ready</p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $panels = $(".panel");
      let busy = false;
      let completed = 0;
      function report() {
        const visible = $panels.filter(":visible").length;
        $("#result").text(`visible=${visible} | in DOM=${$(".panel").length} | completed=${completed}`);
      }
      $("#hide").on("click", function () {
        if (busy || !$panels.filter(":visible").length) return;
        busy = true;
        completed = 0;
        $("#phase").text("hiding");
        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
        const duration = reduced ? 0 : Number($("#duration").val());
        $panels.hide(duration, function () {
          completed++;
          if (completed === $panels.length) {
            busy = false;
            $("#phase").text("hidden");
          }
          report();
        });
        report();
      });
      function showPanels() {
        $panels.stop(true, true).show();
        busy = false;
        completed = 0;
        $("#phase").text("ready");
        report();
      }
      $("#show").on("click", showPanels);
      $("#reset").on("click", function () {
        showPanels();
        $("#one input").val("Keep me");
      });
      report();
    });
  </script>
</body>
</html>

Initially, two panels are visible and both exist in the document:

visible=2 | in DOM=2 | completed=0

1. Edit Note to Edited note and keep Duration at 800 ms.
2. Press Hide. Phase is hiding as both panels shrink away. On completion, phase is hidden and the result is visible=0 | in DOM=2 | completed=2.
3. Show reveals both immediately while retaining Edited note. The first panel's flex layout is restored.
4. Choose 200 ms to compare. If the operating system/browser requests reduced motion, the code uses zero instead of the chosen duration.
5. Instant hides immediately and still completes twice.
6. Press Show or Reset during an 800 ms effect. Both panels return and completed resets to zero. Reset also restores the input to Keep me.

Show reveals the same nodes and does not reset the edited input. Reset changes the value because the example explicitly calls .val("Keep me"). Keeping a hidden node and resetting its values are separate operations.

Manage completion and repeated input

complete runs when each element finishes, rather than once for the entire selection. Two panels therefore give completed=2. Code on the next line does not automatically wait for an animation to finish; connect work that depends on hiding to its actual completion.

busy ignores extra Hide requests during a run. This is the example's way to avoid accumulating queued work, not a built-in .hide() policy. Hide is also ignored when everything is already hidden, keeping the completion count from increasing repeatedly.

Show and Reset use .stop(true, true) to clear pending effects and finish the current effect immediately, then call .show(). Existing completion handlers may run immediately, so busy, completed and phase are reset afterward. In both versions, interrupting and restoring did not produce a later visibility or status change when the original duration elapsed.

Layout, accessibility and restoration checks

.show() can restore the display value used before hiding. This differs from forcing flex or inline elements to display: block. With responsive rules or !important declarations, inspect computed styles. Managing visibility through a class and a consistent CSS rule may better suit those conditions.

display: none removes the content from layout and normally from the accessibility tree. Keep restoration controls outside the hidden area as above. If a real interface hides the area where someone is typing, also decide where focus should move.

Hidden content remains in the DOM and client memory, so hiding does not protect secret information. If the effect fails, check for a matching selection, the full jQuery build, hidden ancestors, Console errors and CSS display precedence. An empty selection has no element to animate and produces no completion callback.