<div class="parent"> <div class="child" id="child-A"> <div class="child" id="child-B"> <div class="child" id="child-C"> </ div> Entonces, la idea es que inicialmente, child-A estará en la parte superior, lo que significa que child-B y child-C no serán visibles porque estarán en la parte inferior, cubiertos / protegidos por child-A .
Por lo tanto, habrá una palanca que reduce el ancho de cada niño para establecer quién está visible y quién está oculto.
Puede lograr su objetivo utilizando la position css y z-index , y para activar el activo, puede mutar la clase del elemento por JS. Aquí hay un ejemplo simple, al hacer clic en el área negra, el activo cambiará.
let i = 0; const children = document.querySelectorAll('.child'); function toggleDiv() { children[i].classList.remove('active'); i = (i + 1) % 3; //since we have 3 child children[i].classList.add('active'); } .child { position: absolute; height: 100px; width: 100px; font-size: 20px; background: black; color: white; } .child.active { z-index: 1; } <div class="parent" onClick="toggleDiv()"> <div class="child active" id="child-A">child-A</div> <div class="child" id="child-B">child-B</div> <div class="child" id="child-C">child-C</div> </div> const checkboxes = document.querySelectorAll( 'input[type=checkbox]' ); var myFunction = function( event ) { var attribute = event.target.getAttribute("data-target"); var element = document.getElementById(attribute); if (element.style.display === "none") element.style.display = "block"; else element.style.display = "none"; }; for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('change', myFunction, false); } .child{ width:200px; height:200px; position:absolute; } #child-A{ background:red; z-index:100; } #child-B{ background:blue; z-index:99; } #child-C{ background:yellow; z-index:98; } #controls{ margin-left: 210px; } <div class="parent"> <div class="child" id="child-A"></div> <div class="child" id="child-B"></div> <div class="child" id="child-C"></div> </div> <div id="controls"> <label><input type="checkbox" data-target="child-A" checked/> Child A </label> <br> <label><input type="checkbox" data-target="child-B" checked/> Child B </label> <br> <label><input type="checkbox" data-target="child-C" checked/> Child C </label> <br> </div>