I was wondering. I have this simple accordion menu:
THe problem is, I want to, when I have one opened menu, when I click on another one, to close the previous one automatically. In other words, only one should be opened at a time...
What do you think, what would be the best solution to this? No jQuery, I want vanilla JS :)
var accordions = document.getElementsByClassName("accordion"); for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } } }
<button class="accordion">Accordian #1</button> <div class="accordion-content open"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordian #2</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordian #3</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> </div>
You can iterate over all the accordions and remove the is-open
class when any accordion is clicked:
var accordions = document.getElementsByClassName("accordion");
for (var i = 0; i < accordions.length; i++) {
accordions[i].onclick = function() {
for (var j = 0; j < accordions.length; j++) {
accordions[j].classList.remove('is-open');
}
accordions[i].classList.toggle('is-open');
}
}
Then hide the accordions using CSS:
.accordion:not(.is-open) {
display: none;
}
You do not have to iterate through all accordions since you can save the last opened one. See my solution below.
var accordions = document.getElementsByClassName("accordion"); var openAccordion = null; for (var i = 0; i < accordions.length; i++) { accordions[i].onclick = function() { if (openAccordion != null && openAccordion != this) { openAccordion.classList.toggle('is-open'); var content = openAccordion.nextElementSibling; content.style.maxHeight = null; } this.classList.toggle('is-open'); var content = this.nextElementSibling; if (content.style.maxHeight) { // accordion is currently open, so close it content.style.maxHeight = null; } else { // accordion is currently closed, so open it content.style.maxHeight = content.scrollHeight + "px"; } openAccordion = this; }; }
.accordion-content { max-height: 0; overflow: hidden; }
<button class="accordion">Accordion #1</button> <div class="accordion-content open"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordion #2</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div> <button class="accordion">Accordion #3</button> <div class="accordion-content"> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas deleniti molestias necessitatibus quaerat quos incidunt! Quas officiis repellat dolore omnis nihil quo, ratione cupiditate! Sed, deleniti, recusandae! Animi, sapiente, nostrum? </p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.