手风琴菜单想知道

Question

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> 

Answer 1

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;
}

Answer 2

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>