? jQuery Hide & Show

? Quick Overview

The hide() and show() methods in jQuery allow you to easily control the visibility of HTML elements with or without animation.

? Key Concepts

• hide() removes an element from view
• show() brings a hidden element back
• Optional duration creates smooth animations
• Callbacks run after animation finishes

? Syntax & Theory

Both methods can be used with no parameters, a duration, or a duration with a callback function.

// Basic hide and show syntax
$("#element").hide();
$("#element").show();

? Code Example

// Instantly hide the element
$("#hideShowBox").hide();
// Instantly show the element
$("#hideShowBox").show();

⏱️ Using Duration & Callback

You can control animation speed and execute logic after animation completes.

// Hide element with animation
$("#hideShowBox2").hide(1000);
// Show element with animation
$("#hideShowBox2").show(1000);
// Callback executes after hiding
$("#hideShowBox2").hide(1000,function(){
alert("Hidden!");
});

?️ Interactive Demo: Toggle & Speed Control

Adjust the slider to change the animation duration (ms) and use the Toggle button to switch visibility.

? Use Cases

• Showing and hiding menus
• Collapsible sections
• Improving UI interactions