Close all collapsible content at once

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?

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>