Tengo el siguiente código:
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } .content { max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; } <button class="collapsible">First question</button> <div class="content">First answer</div> <button class="collapsible">Second question</button> <div class="content">Second answer</div> <button class="collapsible">Close all collapsible content</button> Hay dos botones plegables llamados First question y Second question . Haces clic en uno de ellos para mostrar el contenido y vuelves a hacer clic para ocultar el contenido.
Si abrió varios contenidos contraíbles, debe hacer clic en cada uno de ellos para cerrarlos todos. Necesito un botón que permita cerrar todo a la vez.
Pero no sé cómo decirle al código javascript que no cierre solo uno sino todos los contenidos.
¿Sabes cómo puedo hacer eso?
Según el código que proporcionó, solo debe recorrer todos sus divs con el content de la clase. Desde allí, puede aplicar el mismo estilo maxHeight que aplica a los botones individuales.
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } function _CollapseAll() { document.querySelectorAll(".content").forEach(el => { el.style.maxHeight = null; }); } .content { max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; } <button class="collapsible">First question</button> <div class="content">First answer</div> <button class="collapsible">Second question</button> <div class="content">Second answer</div> <button class="collapsible" onclick="_CollapseAll()">Close all collapsible content</button>La forma más fácil sería usar querySelectorAll('.content') que devolverá una lista de nodos. Luego puede usar forEach para manipular todos los elementos de la lista de nodos a la vez:
var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }); } //closes all collapsibles document.querySelector('.collapsible-all').addEventListener('click', function() { document.querySelectorAll('.content').forEach(el => el.style.maxHeight = null); }) .content { max-height:0; overflow:hidden; transition:max-height 0.2s ease-out; } <button class="collapsible">First question</button> <div class="content">First answer</div> <button class="collapsible">Second question</button> <div class="content">Second answer</div> <button class="collapsible-all">Close all collapsible content</button>yo delegaría
const collapse = elem => { const content = elem.nextElementSibling; if (!content || !content.matches(".content")) return; // no content after the element, so leave elem.classList.toggle("active"); if (content.style.maxHeight) { content.style.maxHeight = null; } else { content.style.maxHeight = content.scrollHeight + "px"; } }; const buttons = document.querySelectorAll(".collapsible"); document.getElementById("container").addEventListener("click", e => { const tgt = e.target; if (!tgt.matches(".collapsible")) return; // clicked on something not a button if (tgt.matches(".all")) { // special button buttons.forEach(but => collapse(but)); // toggles. We could send a flag if we only want to collapse } else { collapse(tgt); } }); .content { max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; } .active { color: green; } <div id="container"> <button class="collapsible">First question</button> <div class="content">First answer</div> <button class="collapsible">Second question</button> <div class="content">Second answer</div> <button class="collapsible all">Toggle all collapsible content</button> </div>