Topic: Opening collapsed sidenav sub-menu programatically

Marvin Herbold priority asked 3 years ago

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.

Grzegorz Bujański staff answered 3 years ago

We will discuss in the team the possibility of adding such an option and maybe we will add it.

Marvin Herbold priority answered 3 years ago

Well, then a method needs to be added to the sidenav component to programatically open / close / toggle submenu items.

Grzegorz Bujański staff answered 3 years ago

Unfortunately there is no method that would allow this. You need to set styles to rotate the icon 180 degrees.

Marvin Herbold priority answered 3 years ago

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.

Marvin Herbold priority answered 3 years ago

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.

Michał Duszak staff answered 3 years ago

Programmatically you could use method show(). See below snippet where I implemented simple event listener on a button which shows the sidenav.

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.

  class="btn btn-primary"

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • 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