How to expand all or collapse all list in accordion?

Ionic Framework Ionic Angular
1

Hi. I have a list of data which uses Accordion in Ionic 6.

I want to have a button that expands all and collapses all the items in accordion so that the I do not have to click each item just to open them to lessen the clicks. How can I achieve this programmatically?

Thank you.

2

Developers can allow multiple accordions to be open at once with the multiple property

<ion-accordion-group [multiple]="true" [value]="['first', 'third']">

On button you can toggle accordion and set value

<ion-button (click)="toggleAccordion()">Toggle Accordion</ion-button>

Define function in .ts file

export class ExampleComponent {
  @ViewChild('accordionGroup', { static: true }) accordionGroup: IonAccordionGroup;

  toggleAccordion = () => {
    const nativeEl = this.accordionGroup;
    if (nativeEl.value === 'second') {
      nativeEl.value = undefined;
    } else {
      nativeEl.value = 'second';
    }
  };
}
1 Like