How to close all the menus inside an Accordion in

问题:

I am new to angular 4 here I have an accordion in the structure of Category,Group and Subgroup.

If I clicked on category it shows all the groups in it and if I clicked on the groups it shows all the subgroups .

Now everything is working fine .

What I want to do is If I clicked on the Category again I want to close the accordion with all the groups which are opened before.

In my case if I opened some groups and closed the accordion then If I opened again it shows the groups opened which I have opened before .

I have reproduced my code in stackblitz : https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-ghebrf?file=app/app.component.html

can anyone help me to fix it .

回答1:

i don't believe it's possible to achieve what you are looking for just by using href and ids, because href takes only one argument. Check here.

I added event bindings to check when the parent accordion is being toggled to close all the child accordions too.

Added a click event here:

    <a class="accordion-toggle h6" data-toggle="collapse" data-parent="#accordion1" (click)="onToggle()"  href="#collapseTwo + i">
        {{data?.CAMD_ENTITY_DESC}}
    </a>

and used a ngIf here:

<div [id]="'collapseInnerTwo' + j"  *ngIf="accordion2==true" class="accordion-body collapse" style="margin-left:10px;margin-top:3px">

Check the full solution here: https://stackblitz.com/edit/angular-bootstrap-carousel-dynamic2-fjowve?file=app/app.component.html