Невозможно закрыть аккордеон bootstrap после закрытия модала
Я использую boostrap 5.1.3 и django-bootstrap-modal-forms 2.2.0 в моем django проекте.
Проблема в том, что когда я открываю модал, управляемый django-bootstrap-modal-forms, он изменяет css и поведение элементов bootstrap на странице.
Я иллюстрирую это с помощью элемента аккордеона.
<div class="accordion" id="filters">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" id="filtersButton" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
aria-expanded="false" aria-controls="collapseOne">
Filters
</button>
</h2>
<div class="accordion-body" id="accordion-body-filters">
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<form action="" method="get" class="form form-inline" id="django-filter-form">
Some form here
</form>
</div>
</div>
</div>
Модальный
<div class="modal fade" tabindex="-1" role="dialog" id="modal">
<div class="modal-dialog" role="document">
<div class="modal-content"></div>
</div>
</div>
модальное окно вызывается кнопкой
<button type='button' id='new-payment'
class="btn btn-secondary">
</button>
JS
<script type="text/javascript">
$(document).ready(function() {
$("#new-payment").modalForm({
formURL: "{% url 'Payment_register:add_payment' %}"
});
});
</script>
Когда я открываю и затем закрываю модальное окно, я не могу закрыть аккордеон. Aria-expanded для #filtersButton всегда "true" и класс ".show" у #filtersButton остается, несмотря на нажатие на кнопку collapse. Говоря более точно, #collapseOne на мгновение получает класс "сворачивание", но затем снова становится "show". Единственный способ вернуть нормальное поведение аккордеона - обновить страницу.
Я также обнаружил, что ссылки cdn на bootstrap css и js каким-то образом добавляются в модальный html. Я использую те же самые, но в любом случае это может повлиять на нормальное поведение.
Как это исправить?