I'm trying to make that - in the vertical menu that you can see in this W3Schools example (the original one is that) - when a dropdown is open, the others are closed.
Presently - as you can see from the demo - more dropdowns can be opened simultaneously, but I want that just one can be showed alone, and when I click on another button, the dropdown closes himself.
(Sorry for my bad english, but I'm italien, hope you understand my problem).
Do you know how can do this?
Thanks
Here you can see that currently more dropdowns can be opened, which I don't want
Nice to reply to you for your question asked on Stack Overflow.
As far as I understand you want an accordion-type dropdowns on the side as a menu that opens and closes simultaneously.
I have created a working code for you. Hope it meets your requirement.
Javascript:-
var accItem = document.getElementsByClassName('dropdown-container');
var accHD = document.getElementsByClassName('dropdown-btn');
for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
}
function toggleItem() {
var itemClass = this.nextElementSibling;
for (i = 0; i < accItem.length; i++) {
accItem[i].style.display = "none";
accHD[i].classList.remove("active");
}
if (itemClass.style.display === "none") {
this.classList.add("active");
this.nextElementSibling.style.display = "block";
}
}
Working Fiddle:- https://jsfiddle.net/fve7x8pr/1/
Thanks