This is funny, I guess I don't do this nearly as often as I thought, but: I thought for sure I was just generally toggling a utility .hidden CSS class on items when I need to hide or show them, but that's not actually how I do it. Turns out your .hidden class gets overruled any time you have a display property on an item selected via an #id. Which, I mean, duh, specificity.
In any event I guess hiding and showing things has been on a case-by-case basis for me, but for this project I want a single way to do it. So now I'm checking the element's styles via Window.getComputedStyle() to see if it's set to diplay: none; if it is, we reset it by setting display to null (which reverts our inline style declaration allowing whatever display: flex or such declaration from our stylesheets kick back in), and if it's not, we, well, set display to none.
I've got the basic demo here ...