Show and hide: show, hide, toggle

jQuery effects are ready-made animations for common tasks: smoothly hide a hint, expand a block, show a message. The simplest are hide(), show() and toggle().

Instantly

Without arguments the methods work instantly. hide() sets display: none on the element, and show() restores the previous display value:

<p id="hint">Click a task to mark it as done.</p>
<button id="toggle">Hint</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#hint').hide();
 
  $('#toggle').on('click', function () {
    $('#hint').toggle();
  });
</script>

The hint is hidden right after loading. Each button press shows or hides it: toggle() picks the action itself.

With animation

If you pass a duration, the element smoothly changes size and opacity. The duration is given in milliseconds or with the words 'fast' (200 ms) and 'slow' (600 ms):

<p id="hint">Click a task to mark it as done.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#hide').on('click', function () {
    $('#hint').hide(400);
  });
 
  $('#show').on('click', function () {
    $('#hint').show('slow');
  });
</script>

The paragraph collapses in 0.4 seconds and expands in 0.6.

A function when done

The animation runs in the background, and the next line of code runs immediately. To do something after it finishes, pass a function as the last argument:

<p id="hint">Hint</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('#hint').hide(500, function () {
    console.log('Hint hidden');
  });
 
  console.log('Animation started');
</script>

"Animation started" prints first, "Hint hidden" half a second later.

Is the element visible

The :visible and :hidden selectors check whether an element is displayed. With the is() method they become a condition:

<p id="hint" style="display: none">Hint</p>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  console.log($('#hint').is(':visible')); // false
  console.log($('#hint').is(':hidden'));  // true
</script>

Hiding with a class

For lasting states such as "item done" or "filter on", it is better to toggle a class with display: none in CSS. The state is then visible in the markup, and styles stay in one place:

<style>
  .is-hidden { display: none; }
</style>
 
<ul>
  <li>Buy bread</li>
  <li class="done">Call Oleg</li>
</ul>
 
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $('.done').addClass('is-hidden');
</script>

The finished item is hidden.

The same in plain JavaScript

The instant version is element.hidden = true or element.style.display = 'none'. Smooth hiding without jQuery is done with a CSS transition and a class toggle.

Common mistake

Writing the next action right after the animation:

// script.js
$item.hide(400);
$item.remove(); // the item disappears instantly, no animation is visible

remove() runs without waiting for the animation to finish. Move everything that should happen afterwards into the completion function: $item.hide(400, function () { $(this).remove(); }).