Ionic2 accordion component shows all details


#1

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