La transición no funciona con altura: auto. Así que necesito calcular y establecer la altura dinámica del bloque con JavaScript para que la propiedad de transición funcione. Este es un ejemplo de mi código:
<div class="accordion__item"> <div class="accordion__icon"> <div class="accordion__content"> </div> </div> </div> const accItems = document.querySelectorAll('.accordion__item'); accItems.forEach((item) => { const icon = item.querySelector('.accordion__icon'); const content = item.querySelector('.accordion__content'); item.addEventListener("click", () => { if (item.classList.contains('open')) { item.classList.remove('open'); icon.classList.remove('open'); content.classList.remove('open'); } else { const accOpen = document.querySelectorAll('.open'); accOpen.forEach((open) => { open.classList.remove('open'); }); item.classList.add('open'); icon.classList.add('open'); content.classList.add('open'); } }); });¿Cómo puedo hacer esto?
No es lo ideal, pero no hay mucho que podamos hacer con la altura de transición.
Para una solución alternativa, proporcione a su clase open una propiedad max-height que sea más grande de lo que espera que obtenga el elemento open más grande. Desde allí, puede hacer la transición de la propiedad max-height .
También hay algunas optimizaciones que puede realizar en la devolución de llamada de su detector de eventos. No creo que necesite agregar open a todos los elementos en el acordeón, solo el elemento en sí.
Prueba algo como esto:
const accItems = document.querySelectorAll('.accordion__item'); accItems.forEach((item) => { item.addEventListener("click", () => { const openItems = document.querySelectorAll(".open") openItems.forEach(open => open.classList.toggle("open")) item.classList.toggle("open") } });Luego en tu css:
.open { max-height: 200px } .accordion__item { max-height: 0; transition: max-height 200ms ease; }