Over a million developers have joined DZone.

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

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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;
}

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

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

Published at DZone with permission of Paul Underwood, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

SEE AN EXAMPLE
Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.
Subscribe

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

{{ parent.tldr }}

{{ parent.urlSource.name }}