DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > How to Reverse jQuery SlideUp and SlideDown

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!

Paul Underwood user avatar by
Paul Underwood
·
Sep. 16, 16 · Web Dev Zone · Tutorial
Like (3)
Save
Tweet
18.89K Views

Join the DZone community and get the full member experience.

Join For Free

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

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

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • Quantum Computers Explained
  • How to Get GDPR and Customer Communications Right
  • How to Build Microservices With Node.js
  • Version Number Anti-Patterns

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo