1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB accordion fails to toggle when more than one accordion on same component

PW4U pro asked 6 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!.  

DigiPlan priority answered 3 years ago

@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.

Arkadiusz Idzikowski staff answered 6 years ago

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

PW4U pro answered 6 years ago

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

Arkadiusz Idzikowski staff answered 6 years ago

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

PW4U pro answered 6 years ago

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>
Write
Create snippet
Please insert min. 20 characters.

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
Tags
About author
PW4U
Pro User 30Support score
2Questions 2Answers 0Snippets