[Django]-Bootstrap collapse issue in Django

by

3👍

✅

Finally! here is the answer, there is no problem with jquery or bootstrap. It’s only not working with Django.

Just remove https:// before:

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

after:

<script src="cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <link href="cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
👤Hamza Ishfaq

2👍

I’ve tried your html code w3schools live editor and collapsing works properly.

So in your case problem could be with some other js-code that doesn’t prevent default event handling when clicking on element, because bootstrap itself does it:

https://github.com/twbs/bootstrap/blob/master/js/collapse.js#L202

So check other js files and your browser console for any errors that could prevent bootstrap to handle collapsing functionality.

👤Nick

1👍

You do not have to use an anchor tag at all. Simply replace your <a> tag with a <span> :

...
<span class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
   Header
</span>
...

The result is the exact same but will effectively prevent django from redirecting when the user opens or closes the collapsible. To maintain the cursor i.e hover “hand”, add this CSS :

span[role="button"] {
    cursor: pointer;
}

demo -> http://jsfiddle.net/ae3se1s5/

👤davidkonrad

Leave a comment