Когда откроется выпадающее меню, закройте остальные - Javascript

Question

Я пытаюсь сделать это - в вертикальном меню, которое вы можете увидеть в этом примере W3Schools (оригинальное , ) - когда выпадающий списокоткрыты, остальные закрыты.

В настоящее время - как вы можете видеть из демонстрации - можно открыть больше выпадающих меню одновременно, но я хочу, чтобы только один мог быть показан в одиночку, и когда янажмите на другую кнопку, раскрывающийся список закроется сам.

(извините за мой плохой английский, но я итальянский, надеюсь, вы понимаете мою проблему).
Знаете ли вы, как это можно сделать?

Спасибо

Здесь вы можете видеть, что в настоящее время можно открыть больше выпадающих меню, которые я не хочу

Answer 1

Приятно ответить на ваш вопрос о переполнении стека.

Насколько я понимаю, вы хотите, чтобы выпадающие меню типа гармошки сбоку представляли собой меню, которое открывается и закрывается одновременно.

Я создал рабочий код для вас. Надеюсь, что он соответствует вашим требованиям.

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

    }

Рабочая скрипка: - https://jsfiddle.net/fve7x8pr/1/

Спасибо