Как сделать Аккордеон в Angular

Question

Я новичок в angular и пытаюсь использовать Accordions, используя приведенный ниже код, но он не работает и выдает ошибку вроде event.getElementsByClassName не является функцией Может кто-нибудь помочь мне, пожалуйста, где я сделал неправильно

.html:

h2>Accordion</h2>

<button class="accordion" (click) = "expand($event)">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion" (click) = "expand($event)">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion" (click) = "expand($event)">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

.css:

.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; 
}

.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
    overflow: hidden;
}

.ts:

export class HomePage {

  expand(event){

         var panel = event.getElementsByClassName("accordion");
         if (panel.style.display === "block") {
           panel.style.display = "none";
       } else {
             panel.style.display = "block";
        }  

    }
}

Answer 1

Хотя у вас есть хорошая идея, вы должны прекратить использовать «старые способы».

Angular - это фреймворк с очень мощными функциями.Если вы не используете их в полной мере, то не стоит их использовать!

Например, посмотрите на этот стек-блиц : хотя он очень минимален, он показывает силу Angular.В компоненте нет кода, и у вас уже есть (не анимированный) аккордеон!

<div class="accordion">
  <h2 class="title" (click)="opened = !opened">Title of the accordion</h2>
  <div class="content-container" [class.opened]="opened">
    <p class="content">Content of the accordion</p>
  </div>
</div>

Я бы посоветовал вам прочитать документацию , чтобы увидеть все, что может сделать Angular.Я знаю, что это долго, но поверь мне, оно того стоит.

Answer 2

Если у вас есть динамический список, который вы получите от какого-то API, а затем вы хотите отобразить его в аккордеоне, вы можете создать класс CSS (visible скажем), чтобы применить display: block

Затем создайте свойство (currentIndex) в своем классе компонентов.Всякий раз, когда вы щелкаете по разделу, просто установите currentIndex на индекс раздела, по которому щелкнули.И на основе currentIndex примените класс visible CSS с помощью [ngClass]

Шаблон:

<h2>Accordion</h2>

<div *ngFor="let section of sections; let i = index;">
  <button class="accordion" (click) = "expand(i)">{{section.name}}</button>
  <div class="panel"
    [ngClass]="{ 'visible' : currentIndex === i }">
    <p>{{section.content}}</p>
  </div>
</div>

Класс:

export class HomePage {
  currentIndex = -1;

  sections = [
    { name: 'Section 1', content: 'Content 1' },
    { name: 'Section 2', content: 'Content 2' },
    { name: 'Section 3', content: 'Content 3' },
    ...
  ];

  expand(index) {
    if(this.currentIndex === index) {
      this.currentIndex = null;
      return;
    }
    this.currentIndex = index;
  }

}

CSS:

...

.visible {
  display: block;
}

Вот StackBlitz для вашей ссылки.

Answer 3

Измените свою функцию Ts на:

 expand(event){
     if (event.style.display === "block") {
       event.style.display = "none";
   } else {
         event.style.display = "block";
    }  
}

И ваша HTML-часть должна быть:

    <h2>Accordion</h2>

<button class="accordion" (click) = "expand(panel1)">Section 1</button>
<div #panel1 class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion" (click) = "expand(panel2)">Section 2</button>
<div #panel2 class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion" (click) = "expand(panel3)">Section 3</button>
<div #panel3 class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

Здесь работает stackblitz

PS: Вы можете достичь одного и того же результата различными способами.