Topic: Opening collapsed sidenav sub-menu programatically
How do I correctly programatically open a collapsed sidenav menu item, after the sidenav has already been initialized?
What I am currently doing, is adding the "show" class to the and that works as far as showing the sub-menu items, however the icon on the parent menu item (the ^ and v) is indicating that it is closed, not opened.
Programmatically you could use method show(). See below snippet where I implemented simple event listener on a button which shows the sidenav.
https://mdbootstrap.com/snippets/standard/m-duszak/3152956#js-tab-view
Other way you could use a button element which targets the sidenav with attributes. Where data-mdb-toggle="sidenav" is neccessary for every sidenav, and data-mdb-target takes selector of an element which you would like to show.
https://mdbootstrap.com/snippets/standard/m-duszak/3153003
<button
data-mdb-toggle="sidenav"
data-mdb-target="#sidenav-1"
class="btn btn-primary"
>
</button>
You misunderstand my question. I am not talking about showing / hiding the sidenav itself. I am talking about showing / hiding a sidenav menu item that has sub-menu items.
For example, in your snippet, how would you open / close the "Category 1" menu item programatically?
Grzegorz Bujański staff commented 3 years ago
Just adding the show class: <ul class="sidenav-collapse show">. But you wrote that it doesn't work for you. Please create a snippet in which this bug will occur. We'll check what's going on.
When I say "programatically" it mean using Javascript. I have created a snippet so you can understand what I am trying to do. The submenu does open when I add the "show" class programatically, but the arrow is now facing the wrong way.
https://mdbootstrap.com/snippets/standard/marvin_herbold/3164293
Unfortunately there is no method that would allow this. You need to set styles to rotate the icon 180 degrees.
Well, then a method needs to be added to the sidenav component to programatically open / close / toggle submenu items.
We will discuss in the team the possibility of adding such an option and maybe we will add it.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 3.7.1
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No