Say I have the following HTML and I want to hide all the children of the 'overlay' div dynamically
<div id="overlay" class="foo">
<h2 class="title">title</h2>
<h1 id="bar">sub-title</h1>
<button id="reset">reset</button>
</div>
is there a better way to mass hide/unhide these elements than calling .className = 'hide' on them individually?
*note that I want to retrieve those later so looping over them with .remove() or setting div innerHTML to an empty string is not an option
In your css you can create this:
#overlay.hidden-content > * {
visibility: hidden
}
And add hidden-content to your div with overlay id to hide all the child elements.