Skip to content

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

Answer

Updated…

I’ve updated and provided the code you need… just copy and paste this code in the relevant section of your file. I’m sure this will work for you : )

<li class="nav-item <?= $page == 'patients.php' || $page == 'medical_history.php' ? 'menu-open' : '' ?>">
  <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">
    <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>

adminlte-screenshot