Initialize accordion dynamic


Topic: Initialize accordion dynamic

Kevin pro premium priority asked 9 months ago

Dear MDB-Team,

how is it possible to initialize Accordions only if they are in the view of user and to initialize form like select in the accordion only if the accordion is open and update the labels of the form. I created some code but it doesn't work fine like the accordion does not open.

The snippet: https://mdbootstrap.com/snippets/standard/max16/6041350#js-tab-view

Do you have a solution for it? It would be great.

Best regards Kevin


Kevin pro premium priority commented 9 months ago

In the snippet the the accordion opens but in my dynamic code the accordion would be initialize but it doesn't work fine and sometimes I get the error that mdb is not defined


Kevin pro premium priority answered 2 months ago

Hello,

I've a new problem with this. It works with one select but if I add a second select that should be added to the accordion than the label does not update himself. How can I fix this?

Best regards Kevin


Kamila Pieńkowska staff commented 2 months ago

Pleas provide a snippet and explain what you want to achieve.


Kevin pro premium priority commented 2 months ago

I have a select menu in the third accordion that will be added dynamically. If I copy the code of the first select and add it behind the first select to have a second select than the label of the seconde select works not correct. I used your snippet to check it but you have to add the code on your own because I can't save it there. https://mdbootstrap.com/snippets/standard/kpienkowska/6041647


Kamila Pieńkowska staff commented 2 months ago

There is Fork buttton at the bottom. It will copy my example and you will be able to edit and save it.


Kevin pro premium priority commented 2 months ago

https://mdbootstrap.com/snippets/standard/max16/6270543#js-tab-view The first select that you click works well with the label. Second won't.


Kamila Pieńkowska staff commented 2 months ago

I've adjusted your snippet: https://mdbootstrap.com/snippets/standard/kpienkowska/6272528


Kevin pro premium priority commented 2 months ago

Ok, how can I do this if the select is not in the accordion and mdb variable is at the point of the select not initialised? It get initialised at the end of the site load. https://mdbootstrap.com/snippets/standard/max16/6273429#js-tab-view


Kamila Pieńkowska staff commented 2 months ago

The select component needs to be initiated when it is shown, so target JS initiation so it will happen at that moment. Write your selectors so you want to initialize all select components at once because those in the accordion will have a problem with labels again.


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: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.2.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 11
  • Provided sample code: No
  • Provided link: Yes