AdminLTE 3 expand menu doesn't close/collapse when clicking on another menu

Question

How can I make other slide-down menus close when clicking on another menu item? Right now all menu items are opening one by one and they can only be closed by clicking on the item again. any help will be highly appreciated.I don't know what JavaScript code could be use to solve the issue.

Nav bar code is below:

 <nav class="mt-2" >
        <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">

          <!-- Add icons to the links using the .nav-icon class
               with font-awesome or any other icon font library -->
               <li class="nav-item">
                <router-link to="/dashboard" class="nav-link">
                  <i class="nav-icon fas fa-th cyan"></i>
                  <p>
                    Dashboard
                </p>
                </router-link>
              </li>
          <li class="nav-item has-treeview ">
            <a href="#" class="nav-link ">
              <i class="nav-icon fas fa-building green"></i>
              <p>
                Company
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">

               <li class="nav-item">
               <router-link to="/company" class="nav-link" >
                  <i class="nav-icon fas fa-building "></i>
                  <p>
                    Add-Companies
                   </p>
                </router-link>
              </li>

            </ul>
          </li>
      <li class="nav-item has-treeview ">
            <a href="#" class="nav-link ">
              <i class="nav-icon fas fa-users purple"></i>
              <p>
                Employees
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">

               <li class="nav-item">
               <router-link to="/employee" class="nav-link" >
                  <i class="nav-icon fas fa-user-plus "></i>
                  <p>
                    Add-Employee
                   </p>
                </router-link>
              </li>
               <li class="nav-item">
               <router-link to="/expiredemployee" class="nav-link">
                  <i class="nav-icon fas fa-user "></i>
                  <p>
                    Expired-Employees
                   </p>
                </router-link>
              </li>
            </ul>
          </li>
<li class="nav-item has-treeview ">
            <a href="#" class="nav-link ">
              <i class="nav-icon fas fa-language pink"></i>
              <p>
                Nationality
                <i class="right fas fa-angle-left"></i>
              </p>
            </a>
            <ul class="nav nav-treeview">

               <li class="nav-item">
               <router-link to="/nationality" class="nav-link">
                  <i class="nav-icon fas fa-language "></i>
                  <p>
                    Add-Nationality
                   </p>
                </router-link>
              </li>
            </ul>
          </li>


          </li>


            @can('isAdmin') 
          <li class="nav-item has-treeview ">
              <a href="#" class="nav-link ">
              <i class="nav-icon fas fa-user-secret blue"></i>
              <p>
                Admin Section
                <i class="right fas fa-angle-left"></i>
              </p>
              </a>
            <ul class="nav nav-treeview">
              <li class="nav-item">

                <router-link to="/user" class="nav-link" >

                  <i class="nav-icon fas fa-users " ></i>
                  <p>
                    Users
                    </p>
               </router-link>
              <li  >
            <router-link to="/developer" class="nav-link">

              <i class="nav-icon fas fa-cogs"></i>
              <p>Developer</p>  
           </router-link>   
          </li>
            </ul>
          </li>

          </li>



          @endcan
          <li class="nav-item">
            <router-link to="/profile" class="nav-link">
              <i class="nav-icon fas fa-user orange"></i>
              <p>
                Profile
                {{-- <span class="right badge badge-danger">New</span> --}}
              </p>
            </router-link>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="{{ route('logout') }}"
            onclick="event.preventDefault();
            document.getElementById('logout-form').submit();">
             <i class="nav-icon fas fa-power-off red"></i>
              <p>
              {{ __('Logout') }}
              </p>
             </a>

              <form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
              @csrf
              </form>                      
          </li>
        </ul>
      </nav>

Answer 1

I solved it by the below code (AdminLTE-3.0.0-beta.2)

<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true">

but when you click on dashboard if it is not in treeview then it is not going to close or collapse the menu so you have to put it in the li->ul->li tag to work as will.

Answer 2

Try the below code

 function activeFunc(){
            $("li").removeClass("active current-page");
              var currentSelectedli = $("a.router-link-exact-active").parent('li');
              currentSelectedli.addClass("current-page");
              currentSelectedli.siblings().removeClass("active current-page");
             var parentLI =currentSelectedli.parent("ul").parent("li");
             if(parentLI.length!=0){
                 parentLI.addClass("active");
             }
         }

you have to find the li child and parent and then set the active class because vuejs does not let the page to be reloaded so that was making problem.

Hope this will work for you