Estoy tratando de lograr múltiples listas de acordeón con conceptos de altura dinámica, estoy depurando durante horas y no puedo entender dónde me equivoqué. El código que he probado hasta ahora.
El escenario que estaba probando es cuando se hace clic en las categorías principales con la altura dinámica que se mostrará y ese mismo escenario sucederá también para sus subcategorías. Estoy atascado en cómo tomar el método del hermano interno.
Nota: estoy tratando de lograr esto en javascript vainilla.
¡Cualquier ayuda será apreciada!
var headers = document.querySelectorAll('.first-ul-1 .ul, .sub-ul-1-a ul'); window.addEventListener("DOMContentLoaded", () => { for (var i = 0; i < headers.length; i++) { headers[i].addEventListener('click', openAccordion); } function openAccordion(e) { var parent = this.parentElement; var article = this.nextElementSibling; if (!parent.classList.contains('open')) { parent.classList.add('open'); article.style.maxHeight = article.scrollHeight + 'px'; } else { parent.classList.remove('open'); article.style.maxHeight = '0px'; } } .drop-down-menu, .sub-ul-2-a{ max-height: 0px; overflow: hidden; transition: max-height 350ms ease-in-out; } <nav id="navigation" class="main-nav"> <ul class="main-nav-list first-ul-1"> <li> <p href="#">Types</p> <div class="drop-down-menu"> <div class="menu-container"> <ul class="main-nav-list sub-ul-1-a"> <li> <a href="#">Type of season</a> <ul class="main-nav-list sub-ul-2-a"> <li> <a href="#">Summer </a> </li> </ul> </li> </ul> </div> </div> </li> </ul> </nav>