Lesson 7: jQuery hide(), show() and toggle() | Learn jQuery with Interactive Examples

Understanding Visibility Methods

jQuery provides simple yet powerful methods to control element visibility. These methods are essential for creating interactive interfaces.

Key Concepts:

hide() makes elements disappear
show() reveals hidden elements
toggle() alternates between hide/show
All methods support animation with speed parameters
Can use easing functions for custom animation effects

Method	Description	Speed Parameters
`hide()`	Hides matched elements by setting display:none	fast, slow, milliseconds
`show()`	Shows matched elements by restoring display property	fast, slow, milliseconds
`toggle()`	Toggles between hide and show states	fast, slow, milliseconds

Basic hide() and show() Methods

The simplest way to control element visibility with no animation.

Basic Visibility Control

Hide and show elements with basic methods:

I can disappear and reappear!

// Hide the element
$("#hideBtn").click(function() {
    $("#basicBox").hide();
});

// Show the element
$("#showBtn").click(function() {
    $("#basicBox").show();
});

Using Speed Parameters

Add animation effects to your visibility changes with speed parameters.

Animated Visibility Effects

Control the animation speed with parameters:

Watch me animate in and out!

Animation Speed:

// Get selected speed
const speed = $("#speedSelect").val();

// Hide with animation
$("#animatedHideBtn").click(function() {
    $("#animatedBox").hide(speed);
});

// Show with animation
$("#animatedShowBtn").click(function() {
    $("#animatedBox").show(speed);
});

The toggle() Method

The toggle() method provides an efficient way to alternate between visibility states with a single method.

Toggle Visibility

Switch between visible and hidden states with one button:

Click the button to toggle my visibility!

Element is visible

// Toggle visibility
$("#toggleBtn").click(function() {
    $("#toggleBox").toggle("slow", function() {
        if ($(this).is(":visible")) {
            $("#toggleStatus").text("Element is visible").show();
        } else {
            $("#toggleStatus").text("Element is hidden").show();
        }
    });
});

Practical Applications

Real-world examples of how hide(), show() and toggle() can be used in web interfaces.

Expandable Content

Create collapsible sections for FAQs or documentation.

Additional information that can be expanded or collapsed

Image Galleries

Show/hide images in a gallery interface.

Navigation Menus

Create mobile-friendly navigation that toggles visibility.

Home
About
Services
Contact

Error Messages

Show/hide validation messages in forms.