jQuery — Slide

slideDown()

$("p").slideDown();
$("p").slideDown(400);
$("p").slideDown("slow");

slideUp()

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

slideToggle()

$("p").slideToggle(400);
$("p").slideToggle("slow");

Practical: Accordion

<button class="accordion">Section 1</button>
<div class="panel">
    <p>Content for section 1</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
    <p>Content for section 2</p>
</div>

<script>
$(document).ready(function() {
    $(".accordion").click(function() {
        $(this).next(".panel").slideToggle(300);
    });
});
</script>

CSS Setup for Slides

.panel {
    display: none;
    overflow: hidden;
}

Show/Hide Content

$("#showBtn").click(function() {
    $("#content").slideDown(300);
});

$("#hideBtn").click(function() {
    $("#content").slideUp(300);
});

$("#toggleBtn").click(function() {
    $("#content").slideToggle(300);
});

Mini Practice

1. Create a slideDown reveal on button click
2. Build a simple accordion with slideToggle
3. Slide a panel up when clicking outside
4. Combine slide with fade effects

Up Next

Continue with Animate — custom animations with animate().