Necesito ayuda para hacer que un enlace de anclaje abra el panel de acordeón correspondiente dentro de un acordeón. Hasta ahora, he agregado el enlace de anclaje para que la página se desplace hacia abajo hasta el panel, pero no puedo hacer que se abra.
Estructura del enlace:
<a href="#CO">link text</a>
Estructura de acordeón:
<button class="accordion" id="CO">button header</button> <div class="panel"> <p>text</p> </div>
Estructura JS:
<script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { /* Toggle between adding and removing the "active" class, to highlight the button that controls the panel */ this.classList.toggle("active"); /* Toggle between hiding and showing the active panel */ var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script>
¡¡gracias!!
De hecho, sugeriría intentar echar un vistazo a la etiqueta HTML de details
.
https://www.w3schools.com/tags/tag_details.asp
Lo más probable es que tenga todo lo que necesitas. Todo lo que necesita es un poco de estilo y listo. Entonces no necesita tener JavaScript adicional para alternar la visibilidad del contenido.