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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- 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