jQuery Hide/Show

jQuery Effects - Hide and Show

Learn how to dynamically hide, show, and toggle the visibility of HTML elements using jQuery’s intuitive effect methods.

Click buttons below to see hide(), show(), and toggle() in action.

This tutorial provides concise examples to help you quickly grasp jQuery effects. While modern CSS offers alternatives like transitions and animations, jQuery effects remain useful for their simplicity and cross-browser compatibility, especially in projects already using jQuery.

Core Methods: hide(), show(), toggle()

jQuery provides straightforward methods to control element visibility:

• hide(): Makes selected elements invisible (sets CSS display: none).
• show(): Makes selected elements visible (restores original display value, e.g., block, inline).
• toggle(): Switches between hiding and showing elements.

Basic Usage Example:

// Wait for the DOM to be ready
$(() => {
  // Hide paragraph when #hideButton is clicked
  $('#hideButton').on('click', () => {
    $('p.content').hide();
  });

  // Show paragraph when #showButton is clicked
  $('#showButton').on('click', () => {
    $('p.content').show();
  });

  // Toggle paragraph visibility when #toggleButton is clicked
  $('#toggleButton').on('click', () => {
    $('p.content').toggle();
  });
});

Syntax:

$(selector).hide(duration, complete);
$(selector).show(duration, complete);
$(selector).toggle(duration, complete);

Optional Parameters:

• duration: Specifies the speed of the animation. Can be a number in milliseconds (e.g., 1000), or the strings 'slow' (600ms) or 'fast' (200ms). If omitted, the change happens instantly.
• complete: A callback function executed once the animation finishes. Modern practice often uses Promises returned by animation methods, but callbacks are still supported.

Example with Duration:

// Hide paragraphs over 1 second (1000 milliseconds)
$('#slowHideButton').on('click', () => {
  $('p.content').hide(1000);
});

// Show paragraphs quickly ('fast')
$('#fastShowButton').on('click', () => {
  $('p.content').show('fast');
});

Example with Callback:

// Hide the paragraph, then show an alert
$('#hideWithAlertButton').on('click', () => {
  $('p.content').hide('slow', () => {
    alert('Hide animation complete!');
  });
});

Modern Alternatives & Considerations

While jQuery’s hide() and show() are convenient, simple visibility toggles can often be achieved with CSS.

CSS Example:

/* CSS */
.hidden {
  display: none;
}

// JavaScript (can use jQuery or vanilla JS)
$('#toggleClassButton').on('click', () => {
  $('.content').toggleClass('hidden');
});

For animations, CSS transitions and keyframe animations are generally more performant as they can be hardware-accelerated by the browser. However, jQuery animations offer simpler syntax for basic cases and handle cross-browser details automatically.

jQuery Effects Reference

For a comprehensive overview of all jQuery effects, including sliding and custom animations, consult the official jQuery documentation or reliable references.