JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div id='search_bar'><div>Toggle me!</div></div>

CSS

#search_bar {
    width: 100px;
    height: 250px;
    background: orange;
    color: white;
    position: absolute;
    top: -200px;
}

#search_bar div {
    position: absolute;
    bottom: 0;
}

JavaScript

$(document).ready(function(){
  $("#search_bar").toggle(
      function () {
          $(this).animate({top: 0}, 500);
      },
       function() {
          $(this).animate({top: -200}, 500);
  });
});