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

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:

CSS Accordion :

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

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 .

1 Reply

Know the answer? Post it — somebody with the same question will find it here.