JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
const classes = new Array("shown", "hidden");
const classesCount = 2;
var curClass = 0;
function switchClass() {
    document.getElementById("divel").className=classes[curClass = (curClass + 1) % classesCount];
}
</script>
</head>
<body>
    <button onclick="switchClass()">Press me</button>
    <div id="divel" class="shown">
        Hello World<br>
        Hello World<br>
        Hello World<br> 
    </div>

</body>
</html>

CSS

.hidden {
        height:1px;
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
        overflow:hidden;
    }
    .shown {
        height:50px;
        -webkit-transition-property: height;
        -webkit-transition-duration: 2s;
        -webkit-transition-timing-function: linear;
        overflow:hidden;
    }