Good morning mdb helpdesk.

I'm trying to write a function that collapse all the mdb-accordions contained in a page. The code provided below seems working, in fact all the accordions collpse correctly after the click on the button but a second click on a collapsed accordion shows a strange behavieur: the click repeat the closing animation. There is something that I've forgot to change? Like a status o something similar?

collapseMe() {
  for (let i = 0; i < this.filterArray.length; i++) {
    const name = 'bodyName' + this.filterArray[i].panelCode;
    const id = 'filterAccordion' + this.filterArray[i].panelCode;
    if (document.getElementsByClassName(name)[0] !== undefined) {
      document.getElementById(document.getElementsByClassName(name)[0].id).firstElementChild.attributes.
      getNamedItem('style').value = 'height: 0px; visibility: hidden;';
      document.getElementById(document.getElementsByClassName(name)[0].id).firstElementChild.attributes.
      getNamedItem('style').textContent = 'height: 0px; visibility: hidden;';
    }
    if (document.getElementById(id) !== undefined && document.getElementById(id) !== null) {
      console.log(document.getElementById(id).firstElementChild.attributes);
      document.getElementById(id).firstElementChild.attributes.getNamedItem('class').value = 'card is-collapsed';
      document.getElementById(id).firstElementChild.attributes.getNamedItem('class').textContent = 'card is-collapsed';
      document.getElementById(id).click();
    }
  }
}

and this is the html structure 

<mdb-accordion (click)="isAccordionCollapsed()" >
<mdb-accordion-item id="filterAccordion{{panelCode}}" (click)="log(panelCode)">
<mdb-accordion-item-head [ngClass]="{'bottomOpenBorder' : class }" (click)="setClass()" id="personalJesus"><img src="{{picUrl}}" width="30px" height="30px" class="marginRight15" alt="">{{panelName}}</mdb-accordion-item-head>
<mdb-accordion-item-body id="precious" class="bodyName{{panelCode}}">
</mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>