JSFiddle - React, Tailwind, and code Playground

by ExplosionPIlls

HTML

<div class="container">
<input id="ch" type="checkbox">
<label for="ch"></label>
<div class="text"></div>
</div>

CSS

.text {
    height: 100px;
    overflow: hidden;
}
.container {
    position: relative;
}
label {
    position: absolute;
    top: 100%;
}
input {
    display: none;
}
label:after {
    content: "Show More";
}
input:checked + label:after {
    content: "Show Less";
}
input:checked ~ div {
    height: 100%;
}

JavaScript

document.querySelector('.text').textContent = (new Array(500)).join('test ');