JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div>
        <div id="Container1">
            <div id="Container1">
                <object>.....</object>
            </div>
        </div>
    </div>
    <div onclick="appear()" id="child-2">
        <div id="child-of-child"></div>
    </div>
</div>

CSS

#Container1 {
    height: 30px;
    width: 30px;
    display: none;
    background: yellow;
}
#Container1 > div {
    height: 20px;
    width: 20px;
    display: none;
    background: green;
}
#child-2 {
    height: 30px;
    width: 30px;
    background: blue;
}

JavaScript

function appear() {

    var containers = [];

    var parent = document.getElementById("Container1");

    containers.push(parent);
    containers.push(parent.children[0]);

    for (var i = 0; i < containers.length; i++) {
        containers[i].style.display = "block";
    }

}