I have the following accordion list that uses ng repeat to fill a page with data from a database, at the moment when the page loads the accordions are there and have the data inside but if i click on a random one the first closes, only the first one can open and close.
<div class="bs-example">
<div class="panel-group" id="accordion" *ngFor="let message of messages">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">data
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
data
</div>
</div>
</div>
</div>
</div>
I think it's the same id caused this. Try to add index
for id
<div class="bs-example">
<div class="panel-group" [attr.id]="'accordion_' + i" *ngFor="let message of messages; let i = index;">
<div class="panel panel-default" >
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" [attr.data-parent]="'#accordion_' + i" [attr.href]="'#collapseOne_' + i">{{ message.firstName }} {{ message.lastName }}</a>
</h4>
</div>
<div [attr.id]="'collapseOne_' + i" class="panel-collapse collapse in">
<div class="panel-body">
details here {{ message.empId }}
</div>
</div>
</div>
</div>
</div>
Demo
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With