<div class="accordion-content">
  <div class="accordion accordion-flush" id="accordion-{{ id }}">
    {% for item in items %}
      <div class="accordion-item">
        {% set heading_id = 'flush-heading-' ~ loop.index %}
        {% set collapse_id = 'flush-collapse-' ~ loop.index %}
        <h2 class="accordion-header" id="{{ heading_id }}">
          <button class="accordion-button collapsed" type="button"
                  data-bs-toggle="collapse"
                  data-bs-target="#{{ collapse_id }}"
                  aria-expanded="false"
                  aria-controls="{{ collapse_id }}">
            {{ item.title }}
          </button>
        </h2>
        <div id="{{ collapse_id }}"
            class="accordion-collapse collapse"
            aria-labelledby="{{ heading_id }}"
            data-bs-parent="#accordion-{{ id }}">
          <div class="accordion-body">
            {{ item.content }}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
</div>
