jQuery — Hide and Show

hide()

$("p").hide();             // Instant
$("p").hide(200);          // 200ms animation
$("p").hide("slow");       // 600ms
$("p").hide(400, function() {
    console.log("Hidden");
});

show()

$("p").show();
$("p").show(400);
$("p").show("fast");

toggle()

$("p").toggle();        // Toggle visibility
$("p").toggle(400);     // With animation

Toggle Class

$("button").click(function() {
    $("p").toggleClass("hidden");
});

CSS display Property

$("p").css("display", "none");     // Hide
$("p").css("display", "block");    // Show
$("p").toggle();                    // Toggle

Conditional Visibility

if ($("p").is(":visible")) {
    $("p").hide();
}

Practical Example

<button id="toggleBtn">Show/Hide</button>
<p id="content">This content toggles!</p>

<script>
$(document).ready(function() {
    $("#toggleBtn").click(function() {
        $("#content").slideToggle(400);
    });
});
</script>

Mini Practice

1. Create a toggle button that hides/shows a paragraph
2. Use slideToggle for smooth animation
3. Check visibility with is(":visible")
4. Combine toggle with CSS classes

Up Next

Continue with Fade — fade in, fade out, and fade effects.