JSFiddle - React, Tailwind, and code Playground

by ddmitrey

HTML

<input class="spoilerbutton" type="button" value="Show" onclick="this.value=this.value=='Show'?'Hide':'Show';">
<div class="spoiler"><div>
PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
    PUT CONTENT YOU WISH TO HIDE HERE
</div></div>

CSS

.spoilerbutton {
    display:block;
    margin: 5px 0;
    text-indent: -9999px;
}
.spoiler {
    overflow:hidden;
    background: #f5f5f5;

}
.spoiler > div {
    -webkit-transition: all 0.2s ease;
    -moz-transition: margin 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: margin 0.2s ease;
}
.spoilerbutton[value="Show"] + .spoiler > div {
    margin-top:-100%;
}
.spoilerbutton[value="Hide"] + .spoiler {
    padding:5px;
    background-color:red;
}
.spoilerbutton[value="Show"] {
    background-color:green;
}
.spoilerbutton[value="Hide"] {
    background-color:red;
}