Every time I click on an item in the accordion list, all items expand. Is there a way to only open the card whose header was clicked?
check out this plnkr example
app.component.html
<div id="accordion" *ngIf="res">
<div class="card" *ngFor="let r of res;let i=index">
<div class="card-header">
<h5 class="mb-0">
<button class="btn btn-link"
(click)="toggleShowDiv(i)">
Collapsible Group Item #1
</button>
</h5>
</div>
<div id="a{{i}}" [@slideInOut]="animationState">
<div class="card-body">
<div class="table-responsive">
<table class="table">
dnf ksdfkg skdfgk sd mkdfdm
d kmfsd mdksm dk mdf
d kdm kd kdsmfk sd
sdfsdkg sdkm gdkg dk
</table>
</div>
</div>
</div>
</div>
</div>
app.component.ts
import { Component, OnInit, ElementRef } from '@angular/core';
import { SlideInOutAnimation } from './animation';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
animations: [SlideInOutAnimation]
})
export class AppComponent implements OnInit {
res = [1, 2, 3, 4];
animationState = 'out';
constructor(private el: ElementRef) {}
ngOnInit() {
}
toggleShowDiv(id) {
this.animationState = this.animationState === 'out' ? 'in' :
'out';
}
}
Is it possible to add animation to the card body when it is clicked for expansion?