I’ve done an accordion component but, when i toggle each of them it shows the details of every item, I want just one of the items opened, not all of them at time.
my component.ts is
import { Component, EventEmitter, Output, Input } from ‘@angular/core’;
@Component({
selector: 'accordion',
templateUrl: 'accordion.html'
})
export class CollapseCardComponent {
@Input() isOpen = true;
@Output() opened = new EventEmitter();
@Output() closed = new EventEmitter();
constructor() {
}
toggle() {
this.isOpen = !this.isOpen;
this.isOpen ? this.opened.emit() : this.closed.emit();
}
}
and my template is
<div>
<a href="#" (click)="toggle()" class="title">
Details
</a>
<div [hidden]="!isOpen" class="content">
<ng-content></ng-content>
</div>
</div>
And I am using my component y my page like this;
<accordion [isOpen]="false" *ngFor="let item of items">
item.details
</accordion>
then it shows the list of items and the toggle functions works, but how can i make that just one of the items be opened, and close the others? thanks