button accordion not work when collapse or expand?

Question

I work on angular 7 app I face issue button accordion not work when collapse or expand main report categories .

 

under toggle function called by accordion Index send success and function GetreportByCategoryId work and display data from category selected menu

 

but accordion button not work when collapse or expand data specific report category from side menu .

 

So How to solve this issue please ?

toggleAccordian(event, index) {
var element = event.target;
element.classList.toggle("active");
this._displayreport.GetreportByCategoryId(index);
}

button accordion on html :

<ul *ngFor="let rep of allReportCategories;let i = index;" style="margin-top:2px;" class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
<span ><button class="accordion" (click)="toggleAccordian($event, rep.reportCategoryID)">{{rep.reportCategory}}</button></span>

result of getcategory by id for index 4 pcnflow as below :

 

0: {reportID: 2022, reportName: "PCN Statistic", procedureName: null, iconClass: "icon-rocket", isDeleted: false, …}

1: {reportID: 2023, reportName: "PCN Dunlicate (Year)", procedureName: null, iconClass: "icon-wallet", isDeleted: false, …}

2: {reportID: 2024, reportName: "PCN Duplicate (Suppliers)", procedureName: null, iconClass: "icon-briefcase", isDeleted: false, …}

3: {reportID: 2028, reportName: "PCN Teams", procedureName: null, iconClass: "icon-wallet", isDeleted:

 

stackbliz to full example for more details exist below ;

 

https://stackblitz.com/edit/create-1arrvm?file=app%2Fapp.component.html