How can I set the active state in the sideNav?

  1. MDB Home Page
  2. Support Main Page
  3. MDB jQuery
Topic: How can I set the active state in the sideNav?

herrshi pro premium asked 7 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 7 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
Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: Yes
  • Provided link: No
About author
herrshi
Pro User Premium support
5Support score
4Questions 0Answers
0Snippets likes 0Snippets