I try to make left side menu Collapse as accordion in angula

Question

I work on angular 7 app I try to make left side menu accordion Expandable and Collapse but it does not work.

For main menu I display Main Reports Category as:

"let rep of allReportCategories" style="margin-top:2px;" class="page-sidebar-menu" data-keep-expanded="false" data-auto-scroll="true" data-slide-speed="200">
class="accordion">{{rep.reportCategory}}

For display sub category reports I depend on CategoryID to join between category and sub Category:

*ngFor="let subrep of reportsubCategory"
"subrep.reportCategoryID === rep.reportCategoryID" class="wrapper">
class="sideNav nav navbar">{{subrep.reportName}}

CSS Accordion :

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

I work on Stackbliz already have data and Show Main Category and Sub Category but the issue i can't solve Issue of accordion.

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

my bussiness logic for button as below :

 

I need to pass main category to function getreportbycategory but i dont know

this._displayreport.GetreportByCategoryId(this.reportid).subscribe((data: any[]) => {
this.reportsubCategory = data;
});
toggleAccordian(event, index) {
var element = event.target;
element.classList.toggle("active");
this._displayreport.GetreportByCategoryId(index);
}

also How to display them as accordion when open page .