Как написать код для аккордеона, чтобы при открытии одного элемента другой сам сворачивался?

Question

Eva Ingannamorte @evangelion_16

JavaScript

Как написать код для аккордеона, чтобы при открытии одного элемента другой сам сворачивался?

HTML одного из элементов аккордеона:

accordion-header - видимая часть, при клике на которую разворачивается скрытый список - accordion-body

<div class="res-benef__accordion-item">

                            <div class="res-benef__accordion-header">
                                <span class="res-benef__accordion-icon-line position-absolute"></span>
                                <span class="res-benef__accordion-icon-line position-absolute"></span>
                                <div class="res-benef__accordion-text-block">
                                    <span class="res-benef__accordion-title">...заголовок...</span>
                                </div>
                            </div>

                            <div class="res-benef__accordion-body">
                                <div class="res-benef__accordion-content rb-accordion-content">
                                    <ul class="rb-accordion-content__list">
                                        <li class="rb-accordion-content__list-item">...текст... </li>
                                        <li class="rb-accordion-content__list-item">...текст...</li>
                                    </ul>
                                </div>
                            </div>

</div>

JavaScript-код, который нужно изменить/дополнить:

Все построено на том, что accordion-item добавляется при клике класс active, который и разворачивает accordion-body с помощью изменения max-height. Если класс уже есть, удаляет - сворачивает. Это работает, как надо, однако как сделать так, чтобы нельзя было одновременно развернуть несколько таких элементов? При открытии одного другой автоматически должен закрываться. Что именно для этого нужно прописать?

document.querySelectorAll('.res-benef__accordion-item').forEach((el) => {
    el.addEventListener('click', () => {
        if (el.classList.contains('active')) {
            el.classList.remove('active');
        } else {
            el.classList.add('active');
        }
    });
});