Topic: SideNav — How to make it expanded
I coped your sidenav samle. I want the accordion in it with the links to be expanded. So I have 2 questions:
- How to make all nodes expanded on dom ready?
- How to have just one node expanded?
Here is what I got within the SideNav
<ul class="collapsible collapsible-accordion"> <li id="errors-main"> <a class="collapsible-header waves-effect arrow-r font-size-large"><i class="fas fa-exclamation-triangle font-size-small" ></i> Errors<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li> <a id="list-errors" href="#" class="waves-effect"><i class="fas fa-table"></i> List</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r font-size-large"><i class="fas fa-code-branch font-size-small"></i> Deployments<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body show"> <ul> <li> <a id="list-deployments" href="#" class="waves-effect"><i class="fas fa-table"></i> List</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r font-size-large"><i class="fas fa-users font-size-small"></i> App Users<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect"><i class="fas fa-table"></i> List</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r font-size-large"><i class="fas fa-user-friends font-size-small"></i> System Users<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect"><i class="fas fa-plus"></i> Add New</a> </li> <li> <a href="#" class="waves-effect"><i class="fas fa-table"></i> List</a> </li> </ul> </div> </li> <li><hr style="border:1px solid rgba(255,255,255,0.6);" /></li> <li> <a class="collapsible-header waves-effect arrow-r font-size-large"><i class="fas fa-desktop font-size-small"></i> Software<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect"><i class="fas fa-plus"></i> Add New</a> </li> <li> <a href="#" class="waves-effect"><i class="fas fa-table"></i> List</a> </li> </ul> </div> </li> <li> <a class="collapsible-header waves-effect arrow-r font-size-large"><i class="fas fa-clock font-size-small"></i> Releases<i class="fa fa-angle-down rotate-icon"></i></a> <div class="collapsible-body"> <ul> <li> <a href="#" class="waves-effect"><i class="fas fa-plus"></i> Add New</a> </li> <li> <a href="#" class="waves-effect"><i class="fas fa-table"></i> List</a> </li> </ul> </div> </li> </ul>
Thanks in advance.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Open
Specification of the issue
- User: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
Sebastian Kaczmarek staff pro premium commented 7 years ago
Hi devtrix, Please provide me with more details. What is your exact case? Do you use WordPress or other CMS or is it completely your plain project? What technology do you use? How would you like it to behave exactly? Regards, Sebastian