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

Answer 1

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">


<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

after:

<script src="cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    <link href="cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Answer 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.