JSFiddle - React, Tailwind, and code Playground

by arcm111

HTML

<div id="slidesOptions"></div>
<button id="settings">Settings</button>

CSS

div {
    width: 200px;
    height: 200px;
    background: #333;
    cursor: pointer;
}

JavaScript

document.getElementById('settings').onclick = function () {
    var panel = document.getElementById('slidesOptions'),
        h = panel.offsetHeight,
        n = (h == 0) ? 200 : -200,
        m = (h == 0) ? 0 : 200,
        i = 0;
    function(val){
        panel.style
    while (i <= 100) {
        var v = m + (i * n) / 100;
        setTimeout(function () {
            console.log(v);
            panel.style.height = v + "px";
        }, 200);
        i++;
        //console.log(panel.style.height);
    }
}