MDB accordion fails to toggle when more than one accordion o

Topic: MDB accordion fails to toggle when more than one accordion on same component

PW4U pro asked 5 years ago

Hello!, I am experimenting some troubles with mbd-accordion. When I am running more than one accordion on same component, in my case two accordions, the first one does not toggle fine. On the first accordion, when I open an element, it opens fine. but when I click another element from first accordion, I does not close the first opened. In other hand, when I open one element on first accordion, and then open one element on second accordion, and then back to first accordion I close the previous opened element, it closes the element on first accordion, but also closes the element opened on second accordion. Nevertheless, the second accordion works fine, I open one element and when I open another one on second accordion, it closes the first opened fine, and opens the clicked one. I have tested this on v6.2.2 and v6.2.5 I hope I expressed myself well. Thanks for your help!.

Add comment

DigiPlan priority answered 3 years ago

0 0 Best answer

@Arkadiusz Idzikowski is this already fixed I'm facing the same issue

Arkadiusz Idzikowski staff commented 3 years ago

@DigiPlan This problem was fixed in v7.4.1, if you are using a newer version and the component still doesn't work correctly, please add some example code to your post, so we can reproduce the problem on our end.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Hello, It is very likely that this problem is caused by ngFor directive. Unfortunately, it is not fixed yet. Regards, Arek

Add comment

PW4U pro answered 5 years ago

0 0 Best answer

Hello!, did you found any issue around this problem or fixed it?. Thanks!.

Add comment

Arkadiusz Idzikowski staff answered 5 years ago

0 0 Best answer

Dear PW4U, Thank you for reporting this problem, we will take a closer look at it. Regards, Arek

Add comment

PW4U pro answered 5 years ago

0 0 Best answer

Please insert min. 20 characters.

I am using an accordion like this in a parent component that I replicate N times through an ngFor:

<mdb-accordion [multiple]="false" aria-multiselectable="false">
<mdb-accordion-item *ngFor="let item of [1,2,3,4,5]; let i = index; let isLast = last" [collapsed]="item !== 1" [ngClass]="{ 'last': isLast }">
<mdb-accordion-item-head (click)="headClick(i)">
<mdb-icon icon="file-o"></mdb-icon> {{item.title}}
</mdb-accordion-item-head>
<mdb-progressbar
animate="true" [type]="item === 1 ? 'success' : 'danger'"
[value]="100"
min="0" max="100"
[attr.aria-valuenow]="100"
aria-valuemin="0" aria-valuemax="100"
[mdbTooltip]="Tooltip text'" placement="top"
>{{ item | percent }}
</mdb-progressbar>
<mdb-accordion-item-body>
<app-child-component [item]="item">
</app-child-component>
</mdb-accordion-item-body>
</mdb-accordion-item>
</mdb-accordion>

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

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

PW4U

Pro User 30Support score
2Questions 2Answers 0Snippets