How to show/collapse all the accordion panels at once using ng-bootstrap

Question

Using ng-bootstrap accordion module, and by default it is working fine. trying to customize the toggle functionality which will show/collapse at once on button click.

After some debugging, now achieved the functionality. want to make sure approach is good or not.

this is what I tried:

Plunker Demo

Component:

    import { Component, ElementRef } from '@angular/core';
import {NgbAccordionConfig,NgbPanelChangeEvent} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: 'src/accordion-basic.html',
  providers: [NgbAccordionConfig]
})
export class NgbdAccordionBasic {
  constructor(public config: NgbAccordionConfig, public elementRef: ElementRef) {
    // customize default values of accordions used by this component tree
    this.config.closeOthers = false;
  }
  toggle(event: NgbPanelChangeEvent, acc: NgbAccordion){
      if(acc.activeIds.length > 0){
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = false;
        acc.activeIds.pop(val.id);
        });
      } else {
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = true;
        acc.activeIds.push(val.id);
      });
      }

  }
}

HTML:

<button (click)="toggle($event, acc);">Toogle all accordions</button>
<ngb-accordion #acc="ngbAccordion">
  <ngb-panel title="Simple" id="ngb-panel-0">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel id="ngb-panel-1">
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel title="last" id="ngb-panel-2">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

score 5 · Accepted Answer · answered Jan 28 '18 at 07:51

First, variables starting with _ are private and not documented. You shouldn't try using them. Other undocumented properties like panels shouldn't be used either.

The NgbAccordion has a documented activeIds property, that allows telling which panels should be active. So just use it. Assign an id to all your panels:

<ngb-panel title="Simple" id="ngb-panel-0">

(same for others, with an incrementing counter)

Then, on click of the button, check if activeIds is empty. If so, set activeIds to an array containing all the IDs. Otherwise, set it to an empty array.

toggle(acc: NgbAccordion) {
  if (acc.activeIds.length) {
    acc.activeIds = [];
  }
  else {
    acc.activeIds = [0, 1, 2].map(i => `ngb-panel-${i}`);
  }
}

Demo

Thank you very much, nicely explained. – Jan 28 '18 at 14:58 — , Jan 28 '18 at 14:58

How to show/collapse all the accordion panels at once using ng-bootstrap

1 Answers1