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