0
100
VistasDiv plegable empujando hacia abajo la siguiente fila de div
No soy muy bueno en css, pero necesito resolver algunos problemas de alineación con el div plegable. A continuación, la parte HTML está en el bucle while y tengo varias filas de div y cada fila tiene 2 div. Al hacer clic en el 1er div en la 1ra fila, se expande y empuja hacia abajo el 1er div de la 2da fila, lo cual es correcto, pero junto con este 2do div de la 2da fila también se mueve hacia abajo. 
<div class="cards"> <div class="Interview" id="Interview"> <?php while ($Interview_Details) { ?> <div class="card01"> <div class="collapsible"> <div class="image"><img src="<?php echo "/images/people/" . $Interview_Details['Photo']; ?>"/></div> <div class="interview"><?php echo $Interview_Details['shortDesc']; ?> </div> </div> <div class="content"> <p><?php echo $Interview_Details['LongDesc']; ?></p> <div class="padding10"> </div> </div> </div> <?php } ?> </div> </div> .card01{ width: 47%; height: auto; position: relative; display: inline-block; margin-top: 20px; vertical-align: top; min-height: 220px; background: rgb(255, 255, 255); } .content { max-height: 0px; padding: 0px 18px; overflow: hidden; transition: max-height 0.2s ease-out 0s; } <script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } </script>
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Definir una class para Expand/Collapse
CSS
.card01 .content { height: 0; transition: 100%; } .card01 .content.active { height: auto; }JavaScript
const cards = document.querySelectorAll("#Interview .card01") cards.forEach(e => { e.addEventListener("click", () => { e.classList.toggle("active"); cards.forEach(el => { if (el !== e) el.classList.remove("active"); }); }); });
·
Juan Pablo Isaza
Denunciar
0
La clase card01 solo puede aparecer una vez por columna... lo que significa que cada columna tiene su propio contenedor. Aquí hay un fragmento para ver cómo debería verse el HTML.
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function () { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } .card01{ width: 47%; height: auto; position: relative; display: inline-block; margin-top: 20px; vertical-align: top; min-height: 220px; background: rgb(255, 255, 255); } .content { max-height: 0px; padding: 0px 18px; overflow: hidden; transition: max-height 0.2s ease-out 0s; } <div class="card01"> <div class="collapsible"> <div class="image"><img src="/images/people/" /></div> <div class="interview">This is a short description</div> </div> <div class="content"> <p>This is a long description. This is a long description. This is a long description</p> <div class="padding10"> </div> </div> <div class="collapsible"> <div class="image"><img src="/images/people/" /></div> <div class="interview">This is a short description</div> </div> <div class="content"> <p>This is a long description. This is a long description. This is a long description</p> <div class="padding10"> </div> </div> </div> <div class="card01"> <div class="collapsible"> <div class="image"><img src="/images/people/" /></div> <div class="interview">This is a short description</div> </div> <div class="content"> <p>This is a long description. This is a long description. This is a long description</p> <div class="padding10"> </div> </div> <div class="collapsible"> <div class="image"><img src="/images/people/" /></div> <div class="interview">This is a short description</div> </div> <div class="content"> <p>This is a long description. This is a long description. This is a long description</p> <div class="padding10"> </div> </div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta