Topic: How can I set the active state in the sideNav?

herrshi premium asked 6 years ago


When I use the sideNav, I could add a class 'active' to the 'collapsible-header' to make it expand. How can I make the 'collapsible-body' item active using jQuery?  
Start your code here
<li>
    <a class="collapsible-header waves-effect arrow-r active">
        Server
        <i class="fa fa-angle-down rotate-icon"></i>
    </a>
    <div class="collapsible-body">
        <ul>
            <li>
                <a href="#" class="waves-effect">GP</a>
            </li>
            <li>
                <a href="#" class="waves-effect">NA</a>
            </li>
        </ul>
    </div>
</li>

Mikołaj Smoleński staff answered 6 years ago


Hi, You can make it using the following code:
<li><a class="show-me collapsible-header waves-effect arrow-r"><i class="fa fa-chevron-right"></i> Submit blog<i class="fa fa-angle-down rotate-icon"></i></a>
 <div class="collapsible-body">
  <ul>
   <li><a href="#" class="waves-effect">Submit listing</a>
   </li>
   <li><a href="#" class="waves-effect">Registration form</a>
   </li>
 </ul>
 </div>
</li>
and then:
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);
$('.show-me').click();
  Best Regards

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