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

How To Reverse jQuery SlideUp And SlideDown

How It Works