While building an accordion I was able to dynamically get accordion items. The problem now is that they all open at the same time. Is it possible to open them one by one based on ID?
This is my code:
<div class="accordion" id="accordionExample">
<div *ngFor="let task of tasks" class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
{{task.name}}
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
{{task.description}}
</div>
</div>
</div>
</div>
I assume the problem is that "collapseOne" is hard-coded but I can't find the solution online.
I haven't experience with accordion. But judging by the code, it seems you need to bind individual IDs to each item. You could try to use the index local variable of the *ngFor directive.
<div class="accordion" id="accordionExample">
<div *ngFor="let task of tasks; let i=index" class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse{{i}}"
data-bs-target="#collapseOne{{i}}"
aria-expanded="true"
aria-controls="collapseOne{{i}}"
>
{{task.name}}
</button>
</h2>
<div
id="collapseOne{{i}}"
class="accordion-collapse collapse show"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">
{{task.description}}
</div>
</div>
</div>
</div>