Проблемы с переключением состояния Bootstrap accordion через JavaScript

Оффтоп javascript
1

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

<div id="menu-accordion" class="accordion">
    <div class="accordion-item">
        <div class="accordion-header">
            <button id="btn${item.number}" data-parent="#menu-accordion" 
                   class="accordion-button">
            Заголовок секции
            </button>
        </div>
        <div id="section${item.number}" class="accordion-content collapse">
            <div class="accordion-body">
            Содержимое секции
            </div>
        </div>
    </div>
</div>

В JavaScript коде делаю так:

$('#menu-accordion button.accordion-button').each(function(index, element){
    $(element).click(function(){
        var itemId = getItemId();
        $('#section' + itemId).collapse({
            toggle: true,
            parent: '#menu-accordion'
        });
    });
});

Возможно что-то упускаю в настройках?

2

Твоя проблема - ты инициализируешь collapse при каждом клике. Bootstrap помнит состояние компонента, а ты создаешь его заново каждый раз. Инициализируй collapse один раз при загрузке страницы, потом просто используй ‘toggle’. Также проверь конфликты с другими обработчиками событий - они могут блокировать аккордеон. Я всегда проверяю консоль на ошибки при повторных кликах.

3

Проблема в том, что ты каждый раз создаешь новый collapse при клике. Метод collapse() делает новый экземпляр, а не переключает старый. Используй $('#section' + itemId).collapse('toggle') - он переключит уже существующий компонент. Или вообще выкинь JS и добавь data-bs-toggle="collapse" и data-bs-target="#section${item.number}" в кнопку - Bootstrap сам разберется.

4

Ты каждый раз вызываешь collapse() заново - просто используй toggle. Попробуй $('#section' + itemId).collapse('toggle') вместо создания нового объекта. У меня была та же проблема, это помогло. Какую версию Bootstrap используешь? В пятой по-другому работает.