JSFiddle - React, Tailwind, and code Playground

by rizwanabbasi

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body {
    margin:0px;
    padding:0px;
}
.bg {
    width:200px;
    height:100px;
    background-image:url(bg.JPG);
    margin:20px;
    margin-bottom:0px;
}
.close {
    width:32px;
    height:32px;
    background-image:url(close.png);
    /*margin-left:-15px;
margin-top:-15px;*/
float:left;
    border:0px;
    cursor:pointer;
}
.show {
    width:100px;
    height:100px;
    background-image:url(show.png);
    border:0px;
    cursor:pointer;/*display:none;*/
}
</style>
</head>

<body>
<div id="container">

  <div id="hide-div">
    <div class="bg">
      <button id="hide" class="close"></button>
    </div>
  </div>
  
<button id="showr" class="show"></button>
</div>
</body>
</html>
<script src="jquery.js"></script>

JavaScript

$("#showr").hide();
        $("#hide").click(function () {            
        $("#showr").show(1000);
        $("#hide-div").hide("slow", function () {
        // use callee so don't have to name the function
        $(this).prev().hide("slow", arguments.callee); 
        });
        });
        $("#showr").click(function () {
        $("#hide-div").show(1000);
        $("#showr").hide("slow", function () {
        // use callee so don't have to name the function
        
        });
        });