Topic: Nesting collapsibles in sidenav

RalfGlaser free asked 4 years ago


Expected behavior I would like to nest collapsibles in the sidenav but I'm unable to figure out how to do it. I would need a menu structure like this:
- travel destinations
---country 1
------region1
------region2
---country2
------region1
------region2
---country3

Actual behavior I tried nesting the li element into the ul of the .collapsible-body but in that case, the 2nd order collapsible won't open. If I put a collapsible li item instead of the ul it breaks the design.

Any help appreciated on how to do this. Thanks!


Piotr Glejzer staff commented 4 years ago

Hello, can you show me your code what did you create about that? Or you don't have it?
https://mdbootstrap.com/snippets/


RalfGlaser free commented 4 years ago

Hello Piotr, thank you very much. I'm not to sure on how to embed the snippet here but I created one on: https://mdbootstrap.com/api/snippets/embed/665321 I tried several things, that was my most promising attempt. However it doesn't work since clicking on the first level opens the second, but clicking on the second level doesn't open the 3rd. Also the .rotate-icon class on the 2nd level doesn't have an effect (icon always pointing up, no animation).


Piotr Glejzer staff commented 4 years ago

Did you see our plugin about this ?
https://mdbootstrap.com/plugins/jquery/treeview/


RalfGlaser free commented 4 years ago

Nope. But that should solve my problem. MDB is quite powerful. Not easy to see all the options ... Thank you very much!


Piotr Glejzer staff commented 4 years ago

Your welcome. Have a good day.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.0
  • Device: PC
  • Browser: Chrome
  • OS: Mac OS X
  • Provided sample code: No
  • Provided link: No