MDB accordion fails to toggle when more than one accordion o

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

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>

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

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

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

DigiPlan pro premium priority answered 4 years ago

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

Arkadiusz Idzikowski staff commented 4 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.
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
  • User: 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
About author
PW4U
Pro User
30Support score
2Questions 2Answers
0Snippets likes 0Snippets