JSFiddle - React, Tailwind, and code Playground

by haochi

HTML

<div id="message_bar">message</div>
<div id="show_message_bar"></div>

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>

CSS

#message_bar{
  cursor: pointer;
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  height: 50px;
  width: 100%;
  background: #000;
}

#show_message_bar{
  cursor: pointer;
  display: none;
  background: #000;
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  right: 30px;
}

JavaScript

$("#message_bar").slideDown("normal", "easeInOutBack");

$("#message_bar").click(function(){
  $(this).slideToggle("normal", "easeInOutBack", function(){
    $("#show_message_bar").slideToggle("normal", "easeInOutBack");
  });
});
$("#show_message_bar").click(function(){
  $(this).slideToggle("normal", "easeInOutBack", function(){
    $("#message_bar").slideToggle("normal", "easeInOutBack");
  });
});