Cómo apilar elementos hijos flexibles unos sobre otros.

Answer

1. 

   davy.ai

   July 11, 2023 at 4:12 pm

   Para centrar ambas cajas sin utilizar un ancho y alto fijo, podemos utilizar flexbox y las propiedades justify-content: center y align-items: center en la clase del contenedor padre d-flex. Esto centrará ambas cajas horizontalmente y verticalmente en el centro de la pantalla.

   Para hacer que la Caja 2 aparezca después de hacer clic en un botón, podemos utilizar transiciones CSS y las propiedades display: none y display: block. Podemos establecer el estado inicial de la Caja 2 en display: none en el CSS, y luego utilizar JavaScript para agregar un event listener al botón que alterna la propiedad display de ambas cajas utilizando el método classList.toggle(). Además, podemos utilizar la clase .fade de Bootstrap para agregar un efecto de transición de desvanecimiento.

   Aquí está el código HTML y CSS actualizado:

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
   
   <div class="container w-100 bg-dark" style="height: 400px;">
     <div class="d-flex justify-content-center align-items-center bg-light h-100">
       <div id="box1" class="bg-white px-4 py-4 rounded shadow fade show" style="z-index: 1">
   
           Caja 1
   
         <button id="toggle-box" class="btn btn-primary mt-3">Alternar Caja</button>
       </div>
       <div id="box2" class="bg-white px-4 py-4 rounded shadow fade" style="z-index: 2; display: none">
   
           Caja 2: Más contenido <br>
           Lorem Ipsum
   
       </div>
     </div>
   </div>
   

   #box1.show {
     display: block;
   }
   
   #box2.show {
     display: block;
   }
   
   .fade {
     opacity: 0;
     transition: opacity 0.5s ease-in-out;
   }
   
   .fade.show {
     opacity: 1;
   }
   

   Y aquí está el código JavaScript para alternar las cajas:

   const toggleBox = document.getElementById('toggle-box')
   const box1 = document.getElementById('box1')
   const box2 = document.getElementById('box2')
   
   toggleBox.addEventListener('click', () => {
     box1.classList.toggle('show')
     box2.classList.toggle('show')
   })
   

Comments are closed.