Bootstrap collapse issue in Django

Question

I'm trying to use a bootstrap page in Django, and unfortunately the collapsing of list-group items does not work.

The relevant parts from the html:

<link rel="stylesheet" href="{% static 'conf/css/bootstrap.css' %}">

      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
              Header
            </a>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="list-group">
            <a href="#" class="list-group-item">Item1</a>
            <a href="#" class="list-group-item">Item2</a>
          </div>
        </div>
      </div>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
<script src="{% static 'conf/js/jquery-1.11.2.min.js' %}"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="{% static 'conf/js/bootstrap.min.js' %}"></script>

When clicking on the header, the "#collapseTwo" signal is sent to the browser to my django application instead of collapsing the list (eg:127.0.0.1:8000/conf/#collapseTwo"). Outside django collapsing work fine. Within django everything else besides collapsing work fine (css, links, images, etc)

URL patterns in django project:

urlpatterns = [
url(r'^$', RedirectView.as_view(url='conf', permanent=False), name='index'),
url(r'^accounts/login/$', 'django.contrib.auth.views.login', {'template_name': 'admin/login.html'}),
url(r'^accounts/logout/$', 'django.contrib.auth.views.logout'),
url(r'^admin/', include(admin.site.urls)),
url(r'^conf/', include('conf.urls')),
]

URL pattern of the app called "conf":

urlpatterns = [
url(r'^$', views.index, name='index'),
]

The key parts of the main view:

def index(request):

    object = AudioSetting.objects.get(pk=1)
    DefaultText = object.text   
    context = {'DefaultText': DefaultText,}

    template = "conf/index.html"

    return render(request, template, context)

Could you please advise how to make collapsing work within django too?

Edit: messages from the django server when rendering the page, including the js and css in use:

System check identified no issues (0 silenced).
October 11, 2015 - 20:51:06
Django version 1.8.5, using settings 'project.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[11/Oct/2015 20:51:14] "GET / HTTP/1.1" 302 0
[11/Oct/2015 20:51:14] "GET /conf HTTP/1.1" 301 0
[11/Oct/2015 20:51:14] "GET /conf/ HTTP/1.1" 200 9041
[11/Oct/2015 20:51:14] "GET /static/conf/css/bootstrap.css HTTP/1.1" 304 0
[11/Oct/2015 20:51:14] "GET /static/conf/img/logo.jpg HTTP/1.1" 304 0
[11/Oct/2015 20:51:15] "GET /static/conf/js/jquery-1.11.2.min.js HTTP/1.1" 304 0

According to http://getbootstrap.com/javascript/#collapse : "_Collapse requires the transitions plugin to be included in your version of Bootstrap._". Are you sure it is the case for you? — vmonteco, Aug 12 '16 at 08:04

score 3 · Accepted Answer · answered Jul 23 '22 at 18:48

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">

score 2 · Answer 2 · answered Oct 11 '15 at 17:11

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.

answered Oct 11 '15 at 17:11

Nick

1,134
7
12

Thanks @Nick! Maybe it's really a js conflict, I'm trying to investigate further. I intend to use only the official bootsrap js, but it's not the light-weight version though. The django server indicates no usage of other js file(s), i'll post its feedback in an edit. – Zorgmorduk Oct 11 '15 at 19:07
@Zorgmorduk You can try to use not minified bootstrap.js file and debug the collapse functionality in your browser console. In this case you'll be able to see if it actually works. – Nick Oct 11 '15 at 19:18
I tried @Nick with not minified bootstrap.js as well, but still did not work. I'm using a raspberry pi for the django project, which has Epiphany browser without console (I'm aware of), but will try debugging somehow. – Zorgmorduk Oct 11 '15 at 20:34
Ah one more thing @davidkonrad and Nick: I've also installed https://pypi.python.org/pypi/django-twitter-bootstrap/. That's for the admin part, but can it interfere maybe? I should find a way of debugging. – Zorgmorduk Oct 11 '15 at 20:37
@davidkonrad and Nick: Thanks for the help from both of you! You convinced me the issue is not in the code itself. Finally I ended up setting up the whole project again from the scratch on an other raspberry pi. I could not identify on the way what could I have messed up on the previous case, but now everything works fine using the same html and django setup. – Zorgmorduk Oct 12 '15 at 20:09
This was exactly the case for me (other javascript stomping on bootstrap's event handling). I had tried to use jqueryui's accordion with a modifier on the click.function to allow page navigation, and the – Animal451 Jun 13 '17 at 07:46

davidkonrad · Answer 3 · 2015-10-11T18:42:00.330

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/

edited Oct 11 '15 at 18:42

answered Oct 11 '15 at 18:13

davidkonrad

83,997
17
205
265

Thanks @davidkonrad! The demo link works perfectly in my browser too, however when I do the same on my html page within Django, it does not work, neither with the span only. Maybe it's something in the direction @Nick mentioned regarding potential conflict / issues with js. – Zorgmorduk Oct 11 '15 at 18:58
@Zorgmorduk - besides unwanted redirecting django itself cannot be the cause - it does not seem bootstrap is loaded at all? Try use CDN's with absolute paths like `` and `` the same with jQuery -> https://code.jquery.com/ - – davidkonrad Oct 11 '15 at 19:21
I tried @davidkonrad, but did not help unfortunately. I've included http://code.jquery.com/jquery-latest.js for jQuery and your two links for css and js. The reason I though it's related to django somehow, because if I just open the html as a file in a browser prior to adding the django commands, it works fine. – Zorgmorduk Oct 11 '15 at 20:31

Bootstrap collapse issue in Django

3 Answers3

Linked