Close all collapsible content at once-CodePudding

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 >First question</button>
<div >First answer</div>

<button >Second question</button>
<div >Second answer</div>

<button >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?

CodePudding user response：

Based on the code you provided, you should just need to loop through all of your divs with the class content. From there you can apply the same maxHeight styling you do with the individual buttons.

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 >First question</button>
<div >First answer</div>

<button >Second question</button>
<div >Second answer</div>

<button  onclick="_CollapseAll()">Close all collapsible content</button>

CodePudding user response：

Easiest way would be to use querySelectorAll('.content') which will return a Node-List. Then you can use forEach to manipulate all elements of the Node-List at once:

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 >First question</button>
<div >First answer</div>

<button >Second question</button>
<div >Second answer</div>

<button >Close all collapsible content</button>

CodePudding user response：

I would delegate

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 >First question</button>
  <div >First answer</div>

  <button >Second question</button>
  <div >Second answer</div>

  <button >Toggle all collapsible content</button>
</div>