Question posted in 
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.
2
Answers
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 :
Be careful, Twitter Bootstrap Javascript doesn't work with jquery versions that are lower than 1.9.1 or higher than 4.
I think you’re missing the wrapping
class="panel"div and theid="accordion"container div. Also like @JRodDynamite said, you should be using an a tag.I pulled those two missing divs from the bootstrap docs.