Search code examples
angularbootstrap-accordion

How to close all panels except the first in ngb-accordion Angular 2 Release 6


I've just started working on an accordion and I was curious as to how to get the first accordion or panel of the accordion to expand and keep the others closed. I've tried using the [closeOthers]="true" but that doesn't seem to work. My html code :

<div *ngIf="cartItems.length > 0">
    <ngb-accordion #acc="ngbAccordion" activeIds="1-header" *ngFor="let item of cartItems; index as i" activeIds="ngb-panel-{{i}}" [closeOthers]="true" (panelChange)="toggleAccordion($event, item)">
         <ngb-panel class="panel-heading" id="ngb-panel-{{i}}" >
             <ng-template ngbPanelTitle>
                 <span  [ngClass]="isFilterOpen(item, true)" class="oi filter-icon filter-display" class="font-18">{{item.name}}</span>
             </ng-template>                   
         </ngb-panel>
     </ngb-accordion>
</div>

Solution

  • For me personally since I'm tracking panel Id's it was to change the activePanelIds to :

    activeIds="ngb-panel-{{0}}"
    

    on the ngb-accordion.