A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div.
<div *ngFor="let item of data; let i = index">
<button
(click)="setIndex(i)"
>
<span
[translate]=“item.title”
></span>
</button>
<div
[class.collapse]='currentIndex !== i'
>
<div [innerHTML]=“item.description | translate"
></div>
</div>
<hr>
</div>
In addition, the typescript function in question is as follows:
setIndex(i) {
this.currentIndex = this.currentIndex === -1 ? i : -1;
}
I attempted changing the click event to mousedown or keydown, but unfortunately, it did not yield the desired outcome.