Topic: Angular - Multiple accordions in the same view

gitllon pro asked 10 months 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 10 months 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());
    }
  }
}

gitllon pro commented 10 months ago

Impeccable work, thank you very much.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • 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