Topic: Angular - Multiple accordions in the same view
                  
                  gitllon
                  pro
                  asked 1 year ago
                
I hope you are fine. In an angular view I have 3 accordions. Expected behavior: if one accordion is deployed, the other two will contract.Sorry for the inconvenience, but I can only find examples for the mdb-accordion-item and not for mdb-accordion.
For example, i have:
    <div>
        <mdb-accordion #accordion1>
            <mdb-accordion-item>
                            ...
            </mdb-accordion-item>
        </mdb-accordion> 
        <mdb-accordion #accordion2>
            <mdb-accordion-item>
                            ...
            </mdb-accordion-item>
        </mdb-accordion> 
        <mdb-accordion #accordion3>
            <mdb-accordion-item>
                            ...
            </mdb-accordion-item>
        </mdb-accordion> 
    </div>
If #accordion1 its open => #accordion2 and #accordion3 closed.
                      
                      Rafał Seifert
                      free
                        answered 1 year ago
                    
In order to achieve such effect you can add a callback function to itemShow event that will trigger closing other items. You can add event binding inside template or through component's class. Here are examples how to achieve that:
Here is example with template binding:
<mdb-accordion>
  <mdb-accordion-item (itemShow)="collapseOtherItems($event)">
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody> This is the first item's accordion body.</ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item (itemShow)="collapseOtherItems($event)">
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody> This is the second item's accordion body.</ng-template>
  </mdb-accordion-item>
</mdb-accordion>
<mdb-accordion>
  <mdb-accordion-item (itemShow)="collapseOtherItems($event)">
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody> This is the first item's accordion body.</ng-template>
  </mdb-accordion-item>
  <mdb-accordion-item (itemShow)="collapseOtherItems($event)">
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody> This is the second item's accordion body.</ng-template>
  </mdb-accordion-item>
</mdb-accordion>
Callback function:
  @ViewChildren(MdbAccordionItemComponent) accordionItems: QueryList<MdbAccordionItemComponent>;
  collapseOtherItems(activeItem: MdbAccordionItemComponent): void {
    if (this.accordionItems) {
      const otherItems = this.accordionItems.toArray().filter((item) => item !== activeItem);
      otherItems.forEach((item) => item.hide());
    }
  }
And here is example with event binding inside component's class:
import { AfterViewInit, Component, DestroyRef, QueryList, ViewChildren } from '@angular/core';
import { MdbAccordionItemComponent } from 'mdb-angular-ui-kit/accordion';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
  selector: 'app-accordion',
  templateUrl: './accordion.component.html',
  styleUrls: ['./accordion.component.scss'],
})
export class AccordionComponent implements AfterViewInit {
  @ViewChildren(MdbAccordionItemComponent) accordionItems: QueryList<MdbAccordionItemComponent>;
  constructor(private destroyRef: DestroyRef) {}
  ngAfterViewInit(): void {
    const items = this.accordionItems.toArray();
    items.forEach((item) => {
      item.itemShow.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((activeItem) => {
        this.collapseOtherItems(activeItem);
      });
    });
  }
  collapseOtherItems(activeItem: MdbAccordionItemComponent): void {
    if (this.accordionItems) {
      const otherItems = this.accordionItems.toArray().filter((item) => item !== activeItem);
      otherItems.forEach((item) => item.hide());
    }
  }
}
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: MDB5 5.0.0
- Device: macbook
- Browser: chrome
- OS: mac os ventura 13
- Provided sample code: No
- Provided link: No