JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bottom">
    <div class="slide">slide</div>
    <a class="slide">Нажать</a>
  </div>

CSS

.bottom
{
  position:fixed;
  width:200px;

  margin:0px 50%;
  left:-100px;
  bottom:0px;
}
.bottom>a.slide
{
  display:inline-block;
  width:100%;
  text-align:center;
  background:#bbb;
  position:relative;
  z-index:1;
}
.bottom>div.slide
{
  height:50px;
  position:relative;
  z-index:0;
  background:#ddd;
}

JavaScript

$(document).ready(function()
{
  $('.bottom a.slide').click(function()
  {
    var obj = $('.bottom>div.slide');
    var top = parseInt($(obj).css('top'),10);
    if(isNaN(top))
    {
      $(obj).css({'top':$(obj).height()+'px'});
    }
    else
    {
      if(top === $(obj).height())
      {
        $(obj).animate({'top': '0px'});
      }
      else if(top === 0)
      {
        $(obj).animate({'top':$(obj).height()+'px'},600);
      }
    }
  });
  $('.bottom a.slide').click();
});