JSFiddle - React, Tailwind, and code Playground

by staeff

HTML

<html>
  
  <head>
    <title>Result</title>
  </head>
  
  <body>
    <div id="panel">Awesome hidden sliding pane <a href="#panel" id="tab">Click to show</a>

    </div>
  </body>

</html>

CSS

#panel {
  padding: 50px;
  height: 100px;
  width: 500px;
  text-align: center;
  font-size: 24px;
  font-family: Arial;
  font-weight: bold;
  background: #EEE;
  cursor: pointer;
  position: absolute;
  top: -180px;
  -webkit-border-bottom-left-radius: 10px;
}
#tab {
  bottom: -25px;
  right: 0px;
  padding: 10px;
  background: #EEE;
  font-size: 16px;
  text-decoration: none;
  position: absolute;
  -webkit-border-bottom-right-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
}

JavaScript

// animated top slider 
var ANIMATION_LENGTH = 300;
$(document).ready(function () {
  $panel = $("#panel");
  $tab = $("#tab");
  $tab.click(function () {
    var isShown = ($panel.css("top") === "0px");
    var newTop = (isShown) ? "-180px" : "0px";
    var tabText = (isShown) ? "Click to show" : "Click to close";
    $panel.animate({
      "top": newTop
    }, ANIMATION_LENGTH, function() {
        $tab.text(tabText);
    });
  });
});