Скрыть / развернуть блоки

Question

Есть список с элементом li.

При нажатии на элемент li мне нужно скрыть / развернуть только один элемент li. Я использовал angular6.

Чтобы развернуть элемент, мне нужно добавить класс 'bx - accordion__item - active' к элементу li и изменить свойство кнопки 'aria-extended = "false" на true.

Как я могу это сделать?

app.component.html

  <ul data-accordion class="bx--accordion">
    <li data-accordion-item class="bx--accordion__item">
     <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
    <div class="bx--accordion__title">Section 1 title</div>
  </button>
   <div id="pane1" class="bx--accordion__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
<li data-accordion-item class="bx--accordion__item" (click)="clickEvent()">
  <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
    <div class="bx--accordion__title">Section 2 title</div>
  </button>
  <div id="pane2" class="bx--accordion__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
<li data-accordion-item class="bx--accordion__item">
  <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
    <div class="bx--accordion__title">Section 3 title</div>
  </button>
  <div id="pane3" class="bx--accordion__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>
<li data-accordion-item class="bx--accordion__item">
  <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--accordion__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M11 8l-5 5-.7-.7L9.6 8 5.3 3.7 6 3z"></path></svg>
    <div class="bx--accordion__title">Section 4 title</div>
  </button>
  <div id="pane4" class="bx--accordion__content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing 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>
</li>