Topic: Collapse accordion from Ts

pboidi pro asked 5 years ago


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>


Damian Gemza staff answered 5 years ago


Dear @pboidi 

You don't have to write so much code like in your example.

If you want to close all accordions after clicking a button, please use a toggle() method from mdb-accordion-item component.

Please take a look at how simple it is:

@ViewChildren(SBItemComponent) collapses: QueryList<SBItemComponent>;

hide() {
this.collapses.forEach((el: any) => {
el.toggle(true);
});
}

Best Regards,

Damian



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.3.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No