jQuery & DOM Manipulation

Sliding Effects

12 min Lesson 24 of 30

Introduction to Sliding Effects

Sliding effects create smooth vertical animations that are perfect for accordions, dropdown menus, expandable panels, and collapsible content. jQuery provides three main sliding methods that animate element height.

The slideDown() Method

The slideDown() method reveals hidden elements by animating their height from 0 to full size.

Basic Syntax:

<div id="panel" style="display: none;">
    <p>This content will slide down</p>
</div>
<button id="slideDownBtn">Slide Down</button>

<script>
$(document).ready(function() {
    $("#slideDownBtn").click(function() {
        $("#panel").slideDown(); // Default: 400ms
    });
});
</script>

With Duration and Callback:

// Custom duration
$("#panel").slideDown(1000);

// Using keywords
$("#panel").slideDown("slow"); // 600ms
$("#panel").slideDown("fast"); // 200ms

// With callback
$("#panel").slideDown(500, function() {
    alert("Panel is now visible!");
});

The slideUp() Method

The slideUp() method hides visible elements by animating their height from full size to 0.

Examples:

<button id="slideUpBtn">Slide Up</button>

<script>
$("#slideUpBtn").click(function() {
    $("#panel").slideUp(600);
});

// Slide up with callback
$("#panel").slideUp(400, function() {
    console.log("Panel hidden");
});

// Slide up multiple elements
$(".collapsible-section").slideUp("slow");
</script>

The slideToggle() Method

The slideToggle() method intelligently switches between slideDown() and slideUp() based on the element's current state.

Toggle Example:

<button id="toggleBtn">Toggle Panel</button>
<div id="panel">
    <p>Click the button to toggle this panel</p>
</div>

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

💡 Tip: Sliding effects are ideal for vertical animations. For horizontal animations, use animate() with width properties (covered in the next lesson).

Practical Example: Accordion Menu

Accordions are collapsible content panels where only one section is open at a time.

<style>
.accordion {
    max-width: 600px;
    margin: 20px auto;
}
.accordion-header {
    background: var(--primary);
    color: white;
    padding: 15px;
    cursor: pointer;
    border: none;
    width: 100%;
    text-align: left;
    font-size: 16px;
    margin-top: 5px;
    transition: background 0.3s;
}
.accordion-header:hover {
    background: var(--primary-light);
}
.accordion-header.active {
    background: var(--primary-light);
}
.accordion-content {
    display: none;
    padding: 15px;
    background: var(--bg-light);
    border: 1px solid var(--border-light);
}
</style>

<div class="accordion">
    <button class="accordion-header">Section 1</button>
    <div class="accordion-content">
        <p>Content for section 1</p>
    </div>

    <button class="accordion-header">Section 2</button>
    <div class="accordion-content">
        <p>Content for section 2</p>
    </div>

    <button class="accordion-header">Section 3</button>
    <div class="accordion-content">
        <p>Content for section 3</p>
    </div>
</div>

<script>
$(document).ready(function() {
    $(".accordion-header").click(function() {
        // Close all other sections
        $(".accordion-content").not($(this).next()).slideUp(300);
        $(".accordion-header").not($(this)).removeClass("active");

        // Toggle current section
        $(this).next().slideToggle(300);
        $(this).toggleClass("active");
    });
});
</script>

Dropdown Menu Implementation

Create interactive dropdown menus with smooth sliding animations.

<style>
.menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: var(--primary);
}
.menu li {
    position: relative;
    display: inline-block;
}
.menu a {
    display: block;
    padding: 15px 20px;
    color: white;
    text-decoration: none;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: var(--primary-light);
    list-style: none;
    padding: 0;
    margin: 0;
}
.submenu li {
    display: block;
}
</style>

<ul class="menu">
    <li>
        <a href="#">Home</a>
    </li>
    <li class="has-submenu">
        <a href="#">Products</a>
        <ul class="submenu">
            <li><a href="#">Web Design</a></li>
            <li><a href="#">Development</a></li>
            <li><a href="#">Consulting</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>
    </li>
</ul>

<script>
$(document).ready(function() {
    $(".has-submenu").hover(
        function() {
            $(this).find(".submenu").stop(true, true).slideDown(200);
        },
        function() {
            $(this).find(".submenu").stop(true, true).slideUp(200);
        }
    );
});
</script>

⚠️ Warning: Always use stop(true, true) before sliding animations on hover events to prevent animation queue buildup when users move their mouse quickly.

FAQ Section with Sliding

Create an interactive FAQ section where users can expand and collapse questions.

<style>
.faq-item {
    margin-bottom: 10px;
    border: 1px solid var(--border-light);
    border-radius: 5px;
    overflow: hidden;
}
.faq-question {
    background: var(--bg-light);
    padding: 15px;
    cursor: pointer;
    font-weight: bold;
    position: relative;
    transition: background 0.3s;
}
.faq-question:hover {
    background: var(--primary-light);
}
.faq-question:after {
    content: "+";
    position: absolute;
    right: 15px;
    font-size: 24px;
    transition: transform 0.3s;
}
.faq-question.active:after {
    content: "−";
}
.faq-answer {
    display: none;
    padding: 15px;
    background: white;
}
</style>

<div class="faq">
    <div class="faq-item">
        <div class="faq-question">What is jQuery?</div>
        <div class="faq-answer">
            <p>jQuery is a fast, small, and feature-rich JavaScript library.</p>
        </div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Why use jQuery?</div>
        <div class="faq-answer">
            <p>jQuery simplifies HTML document traversing, event handling, and Ajax.</p>
        </div>
    </div>

    <div class="faq-item">
        <div class="faq-question">Is jQuery still relevant?</div>
        <div class="faq-answer">
            <p>Yes, jQuery is still widely used in many production websites.</p>
        </div>
    </div>
</div>

<script>
$(document).ready(function() {
    $(".faq-question").click(function() {
        // Toggle answer
        $(this).next(".faq-answer").slideToggle(300);

        // Toggle active class
        $(this).toggleClass("active");
    });
});
</script>

Expandable Product Cards

Create product cards with expandable details sections.

<style>
.product-card {
    width: 300px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    overflow: hidden;
    margin: 20px;
}
.product-image {
    width: 100%;
    height: 200px;
    object-fit: cover;
}
.product-info {
    padding: 15px;
}
.product-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}
.product-price {
    color: var(--primary);
    font-size: 20px;
    font-weight: bold;
}
.product-details {
    display: none;
    padding: 15px;
    background: var(--bg-light);
    border-top: 1px solid var(--border-light);
}
.toggle-details {
    width: 100%;
    padding: 10px;
    background: var(--primary);
    color: white;
    border: none;
    cursor: pointer;
    transition: background 0.3s;
}
.toggle-details:hover {
    background: var(--primary-light);
}
</style>

<div class="product-card">
    <img src="product.jpg" alt="Product" class="product-image">
    <div class="product-info">
        <h3 class="product-title">Premium Widget</h3>
        <p class="product-price">$99.99</p>
        <button class="toggle-details">View Details</button>
    </div>
    <div class="product-details">
        <h4>Specifications</h4>
        <ul>
            <li>Material: Premium Steel</li>
            <li>Weight: 500g</li>
            <li>Warranty: 2 years</li>
        </ul>
    </div>
</div>

<script>
$(document).ready(function() {
    $(".toggle-details").click(function() {
        var details = $(this).closest(".product-card").find(".product-details");
        details.slideToggle(400);

        // Update button text
        if (details.is(":visible")) {
            $(this).text("Hide Details");
        } else {
            $(this).text("View Details");
        }
    });
});
</script>

💡 Tip: Use is(":visible") to check if an element is currently visible, which is helpful for updating button text or icons dynamically.

Combining Multiple Sliding Effects

Create complex interactions by combining sliding with other effects.

// Slide and fade simultaneously
$("#panel").slideDown(500).fadeTo(500, 0.8);

// Sequential animations
$("#panel").slideDown(300, function() {
    $("#message").slideDown(300);
});

// Slide with text change
$("#panel").slideToggle(400, function() {
    if ($(this).is(":visible")) {
        $("#status").text("Panel is open");
    } else {
        $("#status").text("Panel is closed");
    }
});

📝 Exercise: Sidebar Filter Panel

Task: Create a collapsible filter sidebar for an e-commerce site that:

Has multiple filter categories (Price, Brand, Rating, Color)
Each category can be expanded/collapsed independently
Uses slideToggle for smooth animations
Shows a "+" icon when collapsed, "−" when expanded
Has a "Clear All Filters" button that collapses all sections
Remembers the last opened category

Bonus Challenge: Add a mobile-responsive toggle that slides the entire sidebar in/out from the left side of the screen.

Performance Considerations

Always use stop() before sliding on hover events
Avoid animating too many elements simultaneously
Use appropriate durations (200-600ms for most cases)
Consider using CSS transitions for simple show/hide when possible
Test on mobile devices as animations can be slower

Summary

slideDown() - Reveals elements with vertical animation
slideUp() - Hides elements with vertical animation
slideToggle() - Switches between slideDown and slideUp
Perfect for accordions, dropdowns, and collapsible content
Always use stop(true, true) on hover events
Combine with callbacks for sequential or complex animations
Default duration is 400ms; can use "slow", "fast", or custom milliseconds