Here my code with a collapsible navbar. The toggler button opens but not closes the menu:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" integrity="sha384-4LISF5TTJX/fLmGSxO53rV4miRxdg84mZsxmO8Rx5jGtp/LbrixFETvWa5a6sESd" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.min.js" integrity="sha256-Fb0zP4jE3JHqu+IBB9YktLcSjI1Zc6J2b6gTjB0LpoM=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/select2-bootstrap-5-theme.min.css" />
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #134d8c;">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a href="/www" class="nav-link <?php echo ($page == 'home') ? 'active' : '' ?>">
<i class="fs-5 bi-house"></i> <span class="ms-1 me-2 d-none d-sm-inline">Home</span>
</a>
</li>
<li class="nav-item">
<a href="parametri.php" class="nav-link <?php echo ($page == 'parametri') ? 'active' : '' ?>">
<i class="fs-5 bi-gear"></i> <span class="ms-1 me-2 d-none d-sm-inline">Parametri</span>
</a>
</li>
<li class="nav-item">
<a href="anagrafiche.php?nav=anagrafica_alunni" class="nav-link <?php echo ($page == 'anagrafica_alunni') ? 'active' : '' ?>">
<i class="fs-5 bi-backpack2"></i> <span class="ms-1 me-2 d-none d-sm-inline">Anagrafica alunni</span>
</a>
</li>
<li class="nav-item">
<a href="anagrafiche.php?nav=anagrafica_famiglie" class="nav-link <?php echo ($page == 'anagrafica_famiglie') ? 'active' : '' ?>">
<i class="fs-5 bi-people"></i> <span class="ms-1 me-2 d-none d-sm-inline">Anagrafica famiglie</span>
</a>
</li>
<li class="nav-item">
<a href="bonus.php" class="nav-link <?php echo ($page == 'bonus') ? 'active' : '' ?>">
<i class="fs-5 bi-trophy"></i> <span class="ms-1 me-2 d-none d-sm-inline">Bonus</span>
</a>
</li>
<li class="nav-item">
<a href="turni_pulizie.php" class="nav-link <?php echo ($page == 'turni_pulizie') ? 'active' : '' ?>">
<i class="fs-5 bi-trash"></i> <span class="ms-1 me-2 d-none d-sm-inline">Turni pulizie</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
<i class="fs-5 bi-cookie"></i> Turni cucina
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a href="turni_cucina.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina') ? 'active' : '' ?>">Calendario</a></li>
<li><a href="turni_cucina_famiglie.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_famiglie') ? 'active' : '' ?>">Famiglie</a></li>
<li><a href="turni_fissi_cucina.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_fissi_cucina') ? 'active' : '' ?>">Fissi</a></li>
<li><a href="turni_cucina_scambi.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_scambi') ? 'active' : '' ?>">Scambi</a></li>
<li><a href="turni_cucina_pagamenti.php" class="ms-1 me-2 nav-link <?php echo ($page == 'turni_cucina_pagamenti') ? 'active' : '' ?>">Pagamenti</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>I found this similar question, but my code seems already as the answer suggests (include jquery before bootstrap).
Why it works in one way only?