SideNav — How to make it expanded


Topic: SideNav — How to make it expanded

devtrix pro premium priority asked 4 years ago

I coped your sidenav samle.  I want the accordion in it with the links to be expanded.  So I have 2 questions:

  1. How to make all nodes expanded on dom ready?
  2. 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>&nbsp;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>&nbsp;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>&nbsp; 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>&nbsp;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>&nbsp; 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>&nbsp;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>&nbsp;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>&nbsp;Add New</a>
                             </li>
                             <li>
                                 <a href="#" class="waves-effect"><i class="fas fa-table"></i>&nbsp;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>&nbsp;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>&nbsp;Add New</a>
                             </li>
                             <li>
                                 <a href="#" class="waves-effect"><i class="fas fa-table"></i>&nbsp;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>&nbsp;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>&nbsp;Add New</a>
                             </li>
                             <li>
                                 <a href="#" class="waves-effect"><i class="fas fa-table"></i>&nbsp;List</a>
                             </li>
 
 
                         </ul>
                     </div>
                 </li>
             </ul>

 

Thanks in advance.

 


Sebastian Kaczmarek staff pro premium commented 4 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

Please insert min. 20 characters.

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: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No