Складная карточка Bootstrap не сворачивается в цикле for

У меня проблемы с тем, чтобы сворачиваемые карточки сворачивались при нажатии. При нажатии на карточку она не сворачивается, как должна. Я уже подключил Jquery и bootstrap. Что я упускаю?

Мои текущие методы взяты из https://www.bootstrapdash.com/bootstrap-4-tutorial/collapse/

<div class="container-fluid p-5">
    {% for section in sections %}
    <div id="accordion" role="tablist" aria-multiselectable="true">
      <div class="card">
          <div class="card-header" role="tab" id="heading{{section.id}}">
              <h5 class="mb-0">
                  <a data-toggle="collapse" data-parent="#accordion" href="#collapse{{section.id}}" aria-expanded="true" aria-controls="collapseOne">
                    Section {{forloop.counter}}
                  </a>
              </h5>
          </div>
          <div id="collapse{{section.id}}" class="collapse show" role="tabpanel" aria-labelledby="heading{{section.id}}">
              <div class="card-body">
                {% for i in section.coursematerial_set.all %}
                <p>{{i.lecture_name}}</p>
                {% endfor %}
              </div>
          </div>
      </div>
    </div>
    {% endfor %}
</div>

Вернуться на верх