如何在动态手风琴列表中一次只允许打开一个手风琴项目？

Question

我有一个功能良好的手风琴列表，允许我向列表中添加新项目，它们将立即具有手风琴功能。虽然，我想一次只打开一个手风琴项目。我找到的所有关于此的答案都是针对静态列表的，对我的问题没有真正帮助。如果这是一个糟糕的问题，我深表歉意，但我已经花了好几个小时来解决这个问题，但没有运气，而且我没有想法。预先感谢您的帮助。

HTML：HTML 还有更多内容。我只是添加了相关元素。

<body>
    <div class="container">
        <!-- New accordion item added here -->
    </div>

    <script src="main.js"></script>
</body>

Javascript:

// Get items
const addAccBtn = document.getElementById('addAccBtn');
const container = document.querySelector('.container');

addAccBtn.addEventListener('click', e => {
    e.preventDefault();
    let newAccItem = document.createElement('div');
    newAccItem.innerHTML = `
        <div class="acc-title">
            <i class="fas fa-trash delete"></i>
            <h3 class="header-click">${accName}</h3>
            <i class="fas fa-sort-down down-arrow"></i>
        </div>
        <div class="acc-info hidden">
            <i class="far fa-edit"></i>
            <h4>Section 1</h4>
            <p>${input1}</p>
            <h4>Section 2</h4>
            <p>${input2}</p>
        </div>
    `;

    container.appendChild(newAccItem);

    let downBtn = newAccItem.firstElementChild.childNodes[5]; // .down-arrow
    let info = newAccItem.firstElementChild.nextElementSibling; // .acc-info

    downBtn.addEventListener('click', () => {
        if(downBtn.parentElement.nextElementSibling == info && info.classList.contains('hidden')) {
            info.classList.remove('hidden');
            info.classList.add('active');
        }
        else {
            info.classList.remove('active');
            info.classList.add('hidden');
        }
    });
});

同样，手风琴项目将全部打开和关闭，我希望一次打开一个项目。再次感谢您的宝贵时间。

Answer 1

我相信这些行应该有效

...
    let downBtn = newAccItem.firstElementChild.childNodes[5]; // .down-arrow
    let info = newAccItem.firstElementChild.nextElementSibling; // .acc-info

    downBtn.addEventListener('click', () => {

        //here you close all opened accordions ---------------
        document.querySelectorAll(".acc-info.active").forEach(element => {
          if (element !== info) {
            element.classList.remove("active");
            element.classList.add("hidden");
          }
        };
        // --------------------------------------

        if(downBtn.parentElement.nextElementSibling == info && info.classList.contains('hidden')) {
            info.classList.remove('hidden');
            info.classList.add('active');
        }
        else {
            info.classList.remove('active');
            info.classList.add('hidden');
        }
    });
});

_编辑_

添加了一个 if

如何在动态手风琴列表中一次只允许打开一个手风琴项目？

How do I allow only one accordion item to be open at a time on a dynamic accordion list?

html

javascript

accordion