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.
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 .