Django Twitter-bootstrap : collapse not working

Question

I am trying to include a very simple collapse in my Django project. I tried to reduce it to the minimum and it still didn't work.

FYI, I tried installing jquery with pip install django-static-jquery==2.1.4 and in the end, included jquery script inside my <head>.

Here are my files : 1. A simple base.html file extended in my other html template files

{% load static %}
<!DOCTYPE html>
<html>
<head>
    <link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" />
    <link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js">
</script>
    <title>Configuration Amplivia</title>
</head>
<body>
<ul>
  <li><a class="active" href="{% url 'confWeb:index' %}">Accueil</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>


{%  block content %}
{% endblock %}

</body>
</html>

Here is my test file, that extends from the base.html file and has two types of collasping in it, to test if any of them would work (and it doesn't) {% extends "./base.html" %}

{% block content %}
<div class="panel-heading" role="tab" id="headingTwo">
    <h4 class="panel-title">
     <span class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
       Header
        </span>
    </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>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
    <div class="card card-block">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident
    </div>
</div>

{% endblock %}

For now in my own css file (confWeb.css), there's only this :

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

And it simply doesn't work. The button is clickable but it does not expand nor collapse when I use the collapse in. Do you have any idea what I should change ?

FYI I tried what I found here (Bootstrap documentation) and here (another SO question)

Any help/advice is welcomed.

Instead of `span` try using an `a` tag. For the button. Also, check browser console for any errors and clear them. — JRodDynamite, Sep 22 '16 at 10:14
I tried with an `a` tag also but it still didn't work. In the console, I get absolutely nothing (and I activated all the kinds of log) — Licia, Sep 22 '16 at 11:51

score 1 · Answer 1 · answered Sep 22 '16 at 12:27

I think you're missing the wrapping class="panel" div and the id="accordion" container div. Also like @JRodDynamite said, you should be using an a tag.

I pulled those two missing divs from the bootstrap docs.

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <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>
</div>

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-block">
    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident
  </div>
</div>

Sorry my problem was elsewhere (it was because of Bootstrap inclusions appearently, I'll post about it right now). So I didn't need the panel and accordian classes. I also think that the accordion is not needed. It's only if you want either zero or one expanded part. But thanks anyway ! — Licia, Sep 22 '16 at 12:42
I assumed you wanted it since you had an attribute that was targeting it. — schillingt, Sep 22 '16 at 13:10

score 1 · Accepted Answer · edited May 23 '17 at 12:03

After checking that the problem didn't lie in JQuery by checking if it actually loaded (see here), I thought maybe the problem lied in Bootstrap.

The thing is, since the beginning of my coding, I never needed the Javascript part of Twitter-Bootstrap. So as you can see in my base.html above, I only included bootstrap.css but never bootstrap.js

So the header of my file now looks like :

<html>
    <head>
        <link href="{% static 'confWeb/confWeb.css' %}" rel="stylesheet" type ="text/css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
        <link href="{% static 'confWeb/bootstrap.css' %}" rel="stylesheet" type ="text/css" />
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

        <title>Configuration Amplivia</title>
    </head>
    <body>...</body>

Be careful, Twitter Bootstrap Javascript doesn't work with jquery versions that are lower than 1.9.1 or higher than 4.

Django Twitter-bootstrap : collapse not working

2 Answers2