Tengo un componente plegable hecho con javascript. Quiero que funcione de modo que cuando haga clic en el icono, el menú se despliegue/colapse. La forma en que funciona actualmente es que si hace clic en cualquier lugar de la línea completa, se aplica esta regla.
const collapsibles = document.querySelectorAll(".collapsible"); collapsibles.forEach((item) => item.addEventListener("click", function() { this.classList.toggle("collapsible--expanded"); }) ); .collapsible__header { display: flex; justify-content: space-between; } .collapsible__heading { margin-top: 0; } .collapsible__chevron { transform: rotate(-90deg); transition: transform 0.3s; } .collapsible__content { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.5s; } .collapsible--expanded .collapsible__chevron { transform: rotate(0); } .collapsible--expanded .collapsible__content { max-height: 100vh; opacity: 1; } .collapsible .icon { height: 50px; width: 50px; } <div class="collapsible"> <header class="collapsible__header"> <h2 class="collapsible__heading">Item 1</h2> <svg class="icon icon--white collapsible__chevron"> <use xlink:href="images/integratesprite.svg#chevron"></use> </svg> </header> <div class="collapsible__content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, adipisci. </div> </div>Tuve que agregar un lapso con la clase del SVG ya que el SVG es invisible.
El código debería funcionar en el svg si elimina el lapso
document.querySelector(".collapsible__chevron").addEventListener("click", function(e) { this.closest(".collapsible").classList.toggle("collapsible--expanded"); }) .collapsible__header { display: flex; justify-content: space-between; } .collapsible__heading { margin-top: 0; } .collapsible__chevron { transform: rotate(-90deg); transition: transform 0.3s; } .collapsible__content { max-height: 0; overflow: hidden; opacity: 0; transition: all 0.5s; } .collapsible--expanded .collapsible__chevron { transform: rotate(0); } .collapsible--expanded .collapsible__content { max-height: 100vh; opacity: 1; } .collapsible .icon { height: 50px; width: 50px; } <div class="collapsible"> <header class="collapsible__header"> <h2 class="collapsible__heading">Item 1</h2><span class="icon icon--white collapsible__chevron">▼</span> </header> <div class="collapsible__content"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corrupti, adipisci. </div> </div>