Search code examples
javascripthtmlnavbarbootstrap-5

Bootstrap toggler doesn't hide

I am making a website using Bootstrap 5. The navbar can show the navigation when it is in a responsive viewport and I click the toggler icon, but doesn't hide if I click it again. Looking inside the developer tools I see that the class show is still present.

My html navbar:

<nav class="navbar navbar-toggler navbar-light">
  
  <div class="container-fluid">

    <a class="navbar-brand text-light" href="#">
      <img src="../TinDog Start Here/images/vecteezy_spectacle-dog-wearing-with-glasses-vector-illustration_2304572/spectacled_dog_vector_illustration1_generated.jpg" alt="Perro Vectores por Vecteezy" width="80" height="74">
    TinDog</a>
  
    <button class="navbar-toggler collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerContent" aria-controls="navbarTogglerContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="navbar-collapse collapse" id="navbarTogglerContent">
  
      <ul class="navbar-nav ms-auto">
        <li class="nav-item active">
          <a href="#" class="nav-link text-light" aria-current="page">Contact</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light" aria-current="page">Pricing</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link text-light" aria-current="page">Download</a>
        </li>
    
      </ul>
  
    </div>
    
  </div>


</nav>

The Bootstrap scripts:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

The status of toggler before click:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerContent" aria-controls="navbarTogglerContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
<div class="navbar-collapse collapse" id="navbarTogglerContent">

The status after click:

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerContent" aria-controls="navbarTogglerContent" aria-expanded="true" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
<div class="navbar-collapse collapse show" id="navbarTogglerContent">

After I click it again it doesn't hide the nav.

Solution

  • Here, Nothing wrong in your code. & it is working fine. but, You are added both Bundle & Separate bootstrap script. You will need to add any one from both.

    Bundle:

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

    Otherwise:

    Separate:

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

    Please read bootstrap docs here for more details.