CSS to implement sidebar dynamic display hidden cases

After clicking on the sidebar, just leave the display button, click the Show button to return to the previous state

Html

<! DOCTYPE html>
 CSS 
 

* {margin:0;    padding:0;    /*font-family: "Microsoft Yahei"; */}body{position:relative}ul{list-style:none} #show-result {overflow-x: hidden;    Overflow-y: auto;    width:440px;    Position:absolute;    right:20px;    top:150px;    height:490px;    /*background-color: #7bbedf; */} #show-result table {position:absolute;    Overflow-y: auto;    Display:block;    width:390px;    height:100%; /* position:relative;    */Background-color:yellowgreen; Right: -20px;} Table TR {position:relative;}    Table TR td {Display:block; /* width:100%;    */}table TR td:first-child {border-top:1px solid #DEDEDE;    Color: #4890D7; /* Background-color: #00D685; */* height:30%;    */font-size:20px; /* COLOR:WHITE;    */line-height:40px; padding-left:20px;}    Table TR Td:last-child {/* FONT-SIZE:18PX; */padding-left:20px; /* height:70%;    */} #btn-show {position:absolute;    width:70px;    height:70px; background-color:darkgOldenrod;    line-height:70px;    Text-align:center;    Color:white;    Cursor:pointer; left:0;}. hidearea{Display:none;}    #btn-hide {width:70px;    height:70px;    background-color:red;    Position:absolute;    Cursor:pointer;    Left: -70px;    line-height:70px; Text-align:center;}
Jquery

$ (document). Ready (function () {    var Showresult = $ ("#show-result");    $ ("#btn-show"). Click (function () {        $ ("#table-area"). Animate ({right: ' -390px '},1000);        $ ("#btn-show"). Animate ({"Left": "380px"},1000);        $ ("#btn-hide").. animate ({left: ' 0 '});        Showresult.animate ({width: ' 90px ', Height: ' 70px '},1000);        Showresult.addclass (' overhide ');    });    $ ("#btn-hide"). Click (function () {        $ ("#table-area"). Animate ({right: ' -20px '},1000);        $ ("#btn-show"). Animate ({"Left": "0px"},1000);        $ ("#btn-hide"). Animate ({left: ' -70px '});        Showresult.animate ({width: ' 440px ', Height: ' 490px '},1000);        Showresult.removeclass (' overhide ');    })