title: Angular custom accordion component doesn't expand on clicking
body: <p>I have created a custom accordion component in angular 9. But an issue I'm facing. Every time I click on the accordion, it only expands the first button window. Rest other windows don't expand or collapse.</p>
  
  <p>For a better reproduction of the issue I have attached my StackBlitz link here:</p>
  
  <p><a href="https://stackblitz.com/edit/angular-x4jjxr" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-x4jjxr</a></p>
  
  <p>My code:</p>
  
  <p>html</p>
  
  <pre><code>&lt;div *ngFor="let item of faq"&gt;
      &lt;button #el class="accordion" (click)="toggleHelper()"&gt;
          &lt;slot name="header"&gt;{{ item.question }}&lt;/slot&gt;
      &lt;/button&gt;
      &lt;div class="panel"&gt;
          &lt;slot name="details"&gt;
              {{ item.answer }}
          &lt;/slot&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css</p>
  
  <pre><code>.accordion {
      background-color: #eee;
      color: #444;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
  }
  
  .active,
  .accordion:hover {
      background-color: #ccc;
  }
  
  .accordion:after {
      content: "\002B";
      color: #777;
      font-weight: bold;
      float: right;
      margin-left: 5px;
  }
  
  .active:after {
      content: "\2212";
  }
  
  .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
  }
  </code></pre>
  
  <p>Ts</p>
  
  <pre><code>  import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent implements OnInit {
  
  faq: FAQ = [
      {'question': 'one', 'answer': 'Sentence 1'},
      {'question': 'two', 'answer': 'Sentence 1'},
    {'question': 'three', 'answer': 'Sentence 1'},
  ];
  
      @Input() icon = "arrow";
      @ViewChild("el", { read: ElementRef }) el: ElementRef;
  
      constructor() {}
  
  
      ngOnInit(): void {
  
      }
  
  
      toggleHelper() {
          this.el.nativeElement.classList.toggle("active");
          const panel = this.el.nativeElement.nextElementSibling;
          if (panel.style.maxHeight) {
              panel.style.maxHeight = null;
          } else {
              panel.style.maxHeight = panel.scrollHeight + "px";
          }
      }
  }
  </code></pre>