Hello, I am currently working on integrating bootstrap collapse into a section of my django application.
Here is the code snippet that I have implemented so far:
{% extends 'base.html' %}
{% block content %}
<div class="container">
<div class="row">
<div class="col-6">
<div class="card">
<h1 class="text-center">Recent reports</h1>
<div class="accordion" id="accordionExample">
{% for report in reports %}
<div class="card">
<div class="card-header" id="report_{{ loop.counter }}">
<h2 class="mb-0">
{% if loop.counter == 1 %}
<button class="btn btn-link" type="button" data-toggle="collapse"
data-target="#collapse{{ loop.counter }}" aria-expanded="true"
aria-controls="collapse{{ loop.counter }}">
Report #{{ report.report_number }}
</button>
{% else %}
<button class="btn btn-link collapsed" type="button" data-toggle="collapse"
data-target="#collapse{{ loop.counter }}" aria-expanded="false"
aria-controls="collapse{{ loop.counter }}">
Report #{{ report.report_number }}
</button>
{% endif %}
</h2>
</div>
<div id="collapse{{ loop.counter }}" class="collapse"
aria-labelledby="report_{{ loop.counter }}" data-parent="#accordionExample">
<div class="card-body">
<table class="table">
<tbody>
<tr>
<th scope="row">Date</th>
<td>{{ report.datetime_submitted }}</td>
</tr>
<tr>
<th scope="row">XYZ</th>
<td>{{ report.xyz }}</td>
</tr>
.....
</tbody>
</table>
</div>
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
{% endblock %}
I'm running into an issue where clicking on the card-header card causes all the collapse sections with the card-body class to expand instead of just the associated one (as intended).
Any tips or guidance on how to resolve this would be greatly appreciated.