I have the following code:
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>
There are two collapsible buttons called First question
and Second question
. You click on one of them to show the content and you click again to hide the content.
If you opened multiple collapsible contents you have to click on each of them to close all. I need a button that allows to close all at once.
But I don’t know how to tell the javascript code not to close only one but every content.
Do you know how I can do that?
Advertisement
Answer
I would delegate
const collapse = (elem,forceClose) => { const content = elem.nextElementSibling; if (!content || !content.matches(".content")) return; // no content after the element, so leave if (forceClose) elem.classList.remove("active"); // passed force or nothing passed else elem.classList.toggle("active"); content.style.maxHeight = elem.classList.contains("active") ? content.scrollHeight + "px" : null; }; 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 const close = container.querySelectorAll(".collapsible.active").length > 0; buttons.forEach(but => collapse(but,close)); } 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>