Why are my collapsible links not clickable in Bootstrap 5?

Question

When loading Bootstrap 4.5.3 via the CDN bundle:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

the following dropdown works great:

<!-- Nav Item - Pages Collapse Menu -->
<li class="nav-item">
    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
        aria-expanded="true" aria-controls="collapseTwo">
        <span>AAAA</span>
    </a>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
<h6 class="collapse-header">BBBB</h6>
<a class="collapse-item" href="CCCC.html">CCCC</a>
<a class="collapse-item" href="DDDD.html">DDDD</a>
        </div>
    </div>
</li>

However, when I try to upgrade the Bootstrap verson to 5.0.0 via the CDN bundle:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Then the dropdown is no longer clickable. Why is this please?

FYI, I am using a clean install of the theme https://startbootstrap.com/theme/sb-admin-2 (source code available on GitHub: https://github.com/startbootstrap/startbootstrap-sb-admin-2), the index.html. Originally, it mentioned:

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

But I noted the version of the /bootstrap.bundle.min.js (4.5.3) and it still worked without problems via the Bootstrap 4.5.3 CDN bundle, as described above.

That is, everything worked great if using:

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>

I did not make any other changes to any of the cleanly installed files (see GitHub repository above), other than that last line, and everything kept working.

Then, subsequently, the only change I made, somehow destroying the dropdown, is that I changed that last line into the following (to upgrade to Bootstrap 5.0.0):

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Why does this destroys the dropdown links? What tool can I use to troubleshoot this? I don't see any errors in my Firefox Developer Console.

Snippet (Bootstrap 4.5.3)

A full snippet of the working code (with 4.5.3) would be the following:

    <!DOCTYPE html>
    <head>
        <!-- Standard Bootstrap CSS (4.3.1) via CDN -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    </head>

    <body>
            <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">
                <!-- Nav Item - Pages Collapse Menu -->
                <li class="nav-item">
                    <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
                        aria-expanded="true" aria-controls="collapseTwo">
                        <span>Components</span>
                    </a>
                    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
                        <div class="bg-white py-2 collapse-inner rounded">
                            <h6 class="collapse-header">Custom Components:</h6>
                            <a class="collapse-item" href="buttons.html">Buttons</a>
                            <a class="collapse-item" href="cards.html">Cards</a>
                        </div>
                    </div>
                </li>
            </ul>
            <!-- End of Sidebar -->

        <!-- JQuery (3.5.1) and Bootstrap (4.5.3) JS bundle via CDN -->
        <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    </body>
    </html>

If you change the last script line, to upgrade to Bootstrap 5.0.0, then the collapsing does no longer work:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

Any help to make me understand a bit more how to port this code to Bootsrap 5, would be greatly appreciated. Do I even need JQuery for this?

isherwood · Accepted Answer · 2020-12-24T16:26:40.193

Bootstrap 5 doesn't require jQuery, but you can still use it.

If you compare your code to the docs for Collapse you can see that here was an attribute name change from data-toggle to data-bs-toggle for Bootstrap 5. Also, anchors use the href attribute to set the target, not a data attribute. If you fix those things it works.

<!DOCTYPE html>

<head>
  <!-- Standard Bootstrap CSS (5.0.0) via CDN-->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

</head>

<body>
  <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" 
    id="accordionSidebar">

    <!-- Nav Item - Pages Collapse Menu -->
    <li class="nav-item">
      <a class="nav-link collapsed" href="#collapseTwo" 
      data-bs-toggle="collapse" aria-expanded="true" aria-controls="collapseTwo">
        <span>Components</span>
      </a>

      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" 
      data-parent="#accordionSidebar">
        <div class="bg-white py-2 collapse-inner rounded">
          <h6 class="collapse-header">Custom Components:</h6>
          <a class="collapse-item" href="buttons.html">Buttons</a>
          <a class="collapse-item" href="cards.html">Cards</a>
        </div>
      </div>
    </li>
  </ul>
  <!-- End of Sidebar -->

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>

</html>

Why are my collapsible links not clickable in Bootstrap 5?

Snippet (Bootstrap 4.5.3)

1 Answers1