JSFiddle - React, Tailwind, and code Playground

HTML

<div id="someID"></div>

CSS

div {
   background:green;
   width: 100px;
   height: 100px; 
}

JavaScript

//extra methods to get and set objects
Storage.prototype.setObject = function(key, value) {
    this.setItem(key, JSON.stringify(value));
}

Storage.prototype.getObject = function(key) {
    var value = this.getItem(key);
    return value && JSON.parse(value);
}
    
var toggleState = localStorage.getObject('toggleState') || {},
    MIN_SIZE= '0px',
    MAX_SIZE= '450px';

function toggleHeight(id, shown) {
    var e = document.getElementById(id);
    if(shown === true || (typeof shown === "undefined" && e.style.maxHeight == MIN_SIZE)) {
       show(id);
    } else {
       hide(id);
    }
}

function show(id){
    var e = document.getElementById(id);
    e.style.maxHeight = MAX_SIZE;
    toggleState[id] = true;
    localStorage.setObject('toggleState',toggleState);
}
function hide(id){
    var e = document.getElementById(id);
    e.style.maxHeight = MIN_SIZE;
    toggleState[id] = false;
    localStorage.setObject('toggleState',toggleState);
}
//loop over it to set initial values
for(var i in toggleState){
    toggleHeight(i, toggleState[i]);
}

//do manual toggle, hide, show

toggleHeight('someID');