所有手风琴面板同时打开？

Question

I am attempting to create an accordion from scratch in Angular.

I have the functionality of one panel opening and closing, however when I introduce more that one, I am finding that they all open at once.

Is there something I am missing?

Here is a stackblitz to play with

component.ts

export class AppComponent  {
  collapsed = true;

  toggle(el) {
    this.collapsed = !this.collapsed;
  }
}

component.html

<div class="header"
  [ngClass]="{'upArr open': !collapsed, 'downArr': collapsed}" 
  (click)="toggle(this)">
    title
</div>
<div class="body" [ngClass]="{'collapsed': collapsed}">
  data
</div>

<div class="header"
  [ngClass]="{'upArr open': !collapsed, 'downArr': collapsed}" 
  (click)="toggle(this)">
    title
</div>
<div class="body" [ngClass]="{'collapsed': collapsed}">
  data
</div>

component.css

.header {
  background: #CB1C6F;
  cursor: pointer;
  width: 100%;
  font-size: 2em;
  color: white;
}

.header:hover {
  background: #7F045D;
}

.upArr::after {
  float: right;
  content: '\25b2';
}

.downArr::after {
  float: right;
  content: '\25bc';
}

.body {
  background: lightblue;
  overflow: hidden;
  width: 100%;
}

.collapsed {
  height: 0px;
}

.open {
  background: #00A1CC
}

.open:hover {
  background: #005DA1
}

Answer 1

They all collapse (or not collapse) depending on the collapsed variable.

I would consider creatign diferent accordions with an *ngFor loop like so:

component.ts

export class AppComponent  {
  public accordions = [
{
title: 'Some title',
data: 'Some data',
collapsed: true
},
{
title: 'Some title2',
data: 'Some data2',
collapsed: true
}
]

  toggle(el) {
    this.accordions[el].collapsed = !this.accordions[el].collapsed;
  }
}

component.html

<div *ngFor="let accordion of accordions; let i = index">
    <div class="header"
      [ngClass]="{'upArr open': !accordion.collapsed, 'downArr': collapsed}" 
      (click)="toggle(i)">
        {accordion.title}
    </div>
    <div class="body" [ngClass]="accordions[i].collapsed? 'colapsed' : ''">
      {accordion.data}
    </div>
</div>

Answer 2

Please replace this code with your code.

export class AppComponent  {
  public accordions = [
    {
      title: 'head1',
      data: 'content 1 ',
      collapsed: false
    },
    {
      title: 'head2',
      data: 'content 2',
      collapsed: true
    }
  ]

  toggle(el) {
    this.accordions[el].collapsed = !this.accordions[el].collapsed;
  }
}


<div *ngFor="let accordion of accordions; let i = index">
    <div class="header" [ngClass]="{'upArr open': !accordion.collapsed, 'downArr': collapsed}" 
      (click)="toggle(i)">
        {{accordion.title}}
    </div>
    <div class="body" [ngClass]="accordions[i].collapsed? 'collapsed' : ''">
      {{accordion.data}}
    </div>
</div>