Topic: Opening collapsed sidenav sub-menu programatically

Marvin Herbold priority asked 2 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 2 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 2 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 2 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 2 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.

https://mdbootstrap.com/snippets/standard/marvin_herbold/3164293


Marvin Herbold priority answered 2 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 2 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 2 years ago


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>


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

  • 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