SlideDown from the bottom up

The slideUp though it may seem like the solution just hides the element, as we can see in the documentation:

  

Description: Hide the matched elements with a sliding motion.

And so it will not serve what you want. You can fix this by using animate and increasing height .

Example:

let direcao = "+";

$("button").on("click", function(){
  $("#d1").animate({height: direcao + "=50px"}, 1000);
  $(this).text(direcao == "-" ? "Mostrar Div" : "Fechar Div");
  direcao = direcao == "+" ? "-" : "+";
});

#d1 {
  background-color:cyan;
  position:absolute;
  bottom:0;
  width:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="d1"></div>
<button>Mostrar Div</button>

To make it depend on a fixed size you can incrementally increase with:

height: "+=50px"

That increases 50px to the size it has, or decrease with:

height: "-=50px"

Use .slideUp() , do the opposite of slideDown() .