Accordion 2

Ha azt szeretnéd, hogy több accordion elem is aktív lehessen egyszerre, akkor a logikádat meg kell változtatnod. Jelenleg az activeAccordion csak egyetlen indexet tárol. Ehelyett egy tömböt kell használnod, amely tartalmazza az aktív accordion elemek indexeit.

Íme egy javaslat a kód átalakítására:

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AccordionService {
  activeAccordions: number[] = [];

  toggleAccordion(index: number): void {
    const idx = this.activeAccordions.indexOf(index);

    if (idx === -1) {
      // ha az adott index nincs a tömbben, hozzáadjuk
      this.activeAccordions.push(index);
    } else {
      // ha az adott index már a tömbben van, eltávolítjuk
      this.activeAccordions.splice(idx, 1);
    }
  }

  isActive(index: number): boolean {
    return this.activeAccordions.includes(index);
  }
}

A HTML kódodat nem kell módosítanod, mivel az ugyanazokat a metódusokat használja (toggleAccordion és isActive).

Ezzel a változtatással most több accordion elem is lehet aktív egyszerre. Amikor egy elemre kattintasz, az elem hozzáadódik az aktív elemek listájához vagy eltávolításra kerül, attól függően, hogy jelenleg aktív-e vagy sem.