Menu accordion Javascript

Question

Witam stworzyłem menu typu accordion po kliknięciu rozwija się każdy element. Co muszę poprawić żeby jeden element się otwierał a inny zamykał.

 

const dropdown = document.getElementsByClassName('drop');

for (let i = 0; i < dropdown.length; i++) {
	dropdown[i].addEventListener('click', (e) => {
		let panel = e.target.nextElementSibling;
		panel.classList.toggle('open');
	});
}	

 

Answer 1

Moja propozycja "przebudowy" Twojego kodu  Codepen

const dropdowns = document.querySelectorAll('.drop');
const dropdowns_length = dropdowns.length;

dropdowns.forEach(dropdown => {
  dropdown.addEventListener('click', e => {
    const panel = e.target.nextElementSibling;
    for (let i=0; i<dropdowns_length; ++i) {
      if (dropdowns[i].nextElementSibling != panel)
        dropdowns[i].nextElementSibling.classList.remove('open');
    }    
    panel.classList.toggle('open');
  })
})

 

P.S. Tego typu menu, można "zrobić" bez użycia js-a. 
        9 CSS Accordion Menus

Comments

@VBService dziękuję

Answer 2

Zrób pętle po elementach z klasą open i usuń ją (o ile ona istnieje)  i dopiero dodaj nową.