'How to collapsed nav-treeview when I click the submenu in AdminLTE 3.0?

As you can see in the GIF when I click the submenu it no longer collapses. What I want is when I click the submenu it will collapse and will not automatically close when I click the page

<li class="nav-item">
            <a href="#" class="nav-link <?= $page == 'patients.php' || $page == 'medical_history.php'? 'active':''?>">
              <i class="nav-icon fa fa-users-medical"></i>
              <p>Patients</p>
              <i class="fas fa-angle-left right"></i>
            </a>
            <ul class="nav nav-treeview <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'show':''?>">
              <li class="nav-item">
                <a href="patients.php" class="nav-link <?= $page == 'patients.php' ? 'active':''?>">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Patient List</p>
                </a>
              </li>
              <li class="nav-item">
                <a href="medical_history.php" class="nav-link <?= $page == 'medical_history.php' ? 'active':''?>">
                  <i class="far fa-circle nav-icon"></i>
                  <p>Medical History</p>
                </a>
              </li>
            </ul>
          </li>

enter image description here

javascriptphpadminlte


Solution 1:[1]

If your AdminLTE template uses bootstrap, then try to add a collapse and a show class in the nested ul element right after the nav-treeview class.

Solution 2:[2]

Just add display: none

<ul class="nav nav-treeview" style="display: none;">

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Tabassam Ali
Solution 2 Kevin

Related Questions