Estoy tratando de agregar un acordeón en mi página HTML, no funciona en absoluto. No estoy seguro de si estaba integrando la versión correcta de js ( jquery-3.6.0.min.js ). ¿Debo importar algo más? No puedo resolverlo. Este es mi código:
índice.html
<button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum...</p> </div>índice.js
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.maxHeight) { panel.style.maxHeight = null; } else { panel.style.maxHeight = panel.scrollHeight + "px"; } }); }Además, seguí esta página W3S paso a paso, pero no puedo encontrar ningún problema.
Ese mismo w3schools - Cómo - Plegables/Acordeón no funcionará correctamente, si no asigna la altura máxima a <div class="panel"> :
CSS:
.panel { max-height: 0; }Si está usando jQuery (como mencionó), puede usar el método .slideToggle ( https://api.jquery.com/slidetoggle/ ). Aquí hay un ejemplo, que también usa algunos otros métodos prácticos de jQuery:
$(".accordion").click(function() { $(this).next().slideToggle(); });Aquí hay un ejemplo de trabajo en CodePen: https://codepen.io/andyranged/pen/16a51bb5f076bf2348023c000ce7ded0