Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

How to Reverse jQuery SlideUp and SlideDown

DZone's Guide to

How to Reverse jQuery SlideUp and SlideDown

We take a look at how to reverse the purposes of jQuery's slideUp and slideDown methods. Read on for some code and explanations!

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

By default jQuery slideDown will obviously slide the element down to display the contents and slideUp will slide the element up to hide the contents. What if you want to reverse these actions by using slideUp to show the contents and use slideDown to hide the contents.

You could use the jQuery UI slide function to change the direction of methods yourself but then you'll need to load the jQuery UI library with the jQuery library adding more weight to the application. Just as an example, you could use code similar to the below.

$('button').click(function () {
      $(this).hide('slide', { direction: "down" }, 1000);
});

The other option is to use the animate function to create something yourself by changing the height and margin-top of the element you want to slideUp.

The other option is to reverse the actions of the slideDown and slideUp by using CSS.

See the Pen amNxpN by Paul (@paulund) on CodePen.

How It Works

First, let's create a small test unit using two buttons that use slideDown and slideUp correctly to show the content.

<div id="normal">
    <button id="slideContentDown">Slide Down</button>
    <button id="slideContentUp">Slide Up</button>
    <div class="slide slideDown">
        Look this content slides down using the slideDown method.
    </div>
</div>

Next, we'll create the same two buttons and another content area that uses the slideDown method and slideUp method but reverse the methods so that they do the opposite.

<div id="reverse">
    <button id="reverseSlideContentDown">Reverse Slide Down</button>
    <button id="reverseSlideContentUp">Reverse Slide Up</button>
    <div class="slide slideUp">
        This content slides up using the slideDown method.
    </div>
</div>

With these scenarios created we can add the slide methods to the buttons.

$('#slideContentDown').on('click', function()
{
    $('.slideDown').slideDown();
});

$('#slideContentUp').on('click', function()
{
    $('.slideDown').slideUp();
});

$('#reverseSlideContentDown').on('click', function()
{
    $('.slideUp').slideDown();
});

$('#reverseSlideContentUp').on('click', function()
{
    $('.slideUp').slideUp();
});

Using the below CSS we can style the page to show the content.

@import 'https://fonts.googleapis.com/css?family=Lato';

body
{
    background: #3498db;
    color: #FFF;
    font-family: 'Lato', sans-serif;
    font-size: 150%;
}

button
{
    border: 2px solid #FFF;
    background: transparent;
    color: #FFF;
    cursor: pointer;
    font-size: 2rem;
    padding: 1rem 8rem;
    transition: background 0.4s;
    margin: 1rem 0;
}

button:hover
{
    background: #2980b9;
}

.slide
{
    background: #5ABEFF;
    padding: 4rem;
    margin: 1rem 0;
    display: none;
    width: 100%;
}

Below is the code we need to reverse the function, the important properties are position: absolute; and bottom: 0;. jQuery will know that this element has a bottom of 0, therefore it can't slide down so the functions are reversed and jQuery slides the element up to display the content.

#reverse
{
    padding-bottom: 10rem;
    position: relative;
}

.slideUp
{
    position: absolute;
    bottom: 0;
}

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.

Topics:
jquery ,library ,ui ,methods ,function ,animate ,element ,javascript ,code ,example

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}