JSFiddle - React, Tailwind, and code Playground

by raad

HTML

<div>Stuff Below:</div>
<div id="mapsec">
Your Content
</div>
<br/>
<button onclick="foo()">Go</button>

CSS

#mapsec { 
    max-height: 0; 
    overflow: hidden; 
    /* You should prefix the following: */
    transition: "max-height 500ms";
}

#mapsec.active {
    max-height: 2000px;
}

JavaScript

function foo(){
    var div = document.getElementById("mapsec");
    if (div.className === "") {
        div.className = "active";
    } else {
        div.className = "";
    }
}