JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<div id="box">
    <input type="checkbox" id="sh"/>
    <label for="sh">show/hide</label>
    <div id="shbox">
        实现slideUp()/slideDown()
    </div>
</div>

CSS

#box{
    position:relative;
}
#box *:not(#shbox){
    display:inline-block;
}
input{
    position:absolute;
    left:-10000000px;
}
:checked~#shbox{
    height:0px;
}
label{
    width:100px;
    height:30px;
    line-height:30px;
    text-align:center;
    border:1px solid green;
    position:absolute;
    left:0px;
    cursor:pointer;
    border-radius:5px;
}
#shbox{
    background:#ccc;
    overflow-y:hidden;
    color:red;
    width:200px;
    height:200px;
    box-sizing:border-box;
    transition:all 2s;
    position:absolute;
    top:50px;
}