Bonjour,
j'ai un problème depuis quelques temps que je n'arrive pas à résoudre.
Dans mon projet, j'utilise bootstrap d'un côté et un fichier en jquery perso.
Le problème, c'est que je n'arrive pas à faire fonctionner les deux en même temps...

Voici mes deux pages principales (j'utilise django):
La première :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
< html>
    <html lang="fr">
    <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 
        <link href="{% static "aventures\aventures.css" %}" type="text/css" rel="stylesheet">
 
        <title>{% block title %}{{aventure.titre}}: {{chapitre.titre}}{% endblock %}</title>
        {% block head %}{% endblock %}
 
    </head>
 
    <body>
 
        <header>
            <div class="collapse bg-primary" id="navbarHeader">
            <div class="container">
                <div class="row">
                <div class="col-sm-8 col-md-7 py-4">
                    <h4 class="text-white">About</h4>
                    <p class="text-muted">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
                </div>
                <div class="col-sm-4 offset-md-1 py-4">
                    <a class="btn btn-warning" href="{% url 'accueil' %}">Quitter et revenir à l'accueil</a>
                </div>
                </div>
            </div>
            </div>
            <div class="navbar navbar-dark float-right">
            <div class="container-fluid d-flex">
                <button class="navbar-toggler bg-primary" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
                </button>
            </div>
            </div>
        </header>
    {% block jumbotron %}
        <!-- JUMBOTRON -->
        <div class="jumbotron text-center">
            <h1 class="display-4">{{chapitre.titre}}</h1>
            <p class="lead">{{chapitre.resume}}</p>
        </div>
    {% endblock %}
 
    {% block main %}
    {% endblock %}
    <!-- Optional JavaScript -->
      <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <script src="{% static 'jquery-3.5.1.min.js' %}"></script>
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 
    {% block script %}
    {% endblock %}
    </body>
    </html>

La seconde dans le block main:

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
    {% extends "base_aventures.html" %}
    {% load my_filter %}
    {% load static %}
    {% block main %}
    <!--pour passer la variable a javascript-->
    <input id=longueur_templates class="hidden" value={{templates|length}}>
 
    <!--Caroussel-->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false">
 
    {% if len_templates > 1 %}
        <div class="btn-group" role="group" aria-label="Basic example">
            {% for template in templates %}
                <button type="button" class="btn btn-warning chapitre d-block" href="#carouselExampleIndicators" data-slide-to="{{ forloop.counter0 }}">{{template.nom}}</button>
            {% endfor %}
        </div>
    {% endif %}
 
        <div class="carousel-inner">
    {% for template in templates %}
 
        {% if template.nom == 'Journal' %}    {% include './journal.html' %}    {% endif %}
 
        {% if template.nom == 'Énigme' %}
        <div class="carousel-item">    
            <p>Coucou Énigme</p>
        </div>    
        {% endif %}
 
 
        {% if template.nom == 'Choix' %}    {% include './choix.html' %}    {% endif %}
 
 
        {% if template.nom == 'Actions' %}    {% include './actions.html' %}    {% endif %}
 
        {% if template.nom == 'Question' %}
        <div class="carousel-item">
            <p>Coucou Question</p>
        </div>
        {% endif %}
 
 
    {% endfor %}
        </div>      
    </div>   
 
 
    {% endblock %}
 
    {% block script %}
 
    <script type="text/javascript" src="{% static 'aventures/js/chapitre.js' %}"></script>
 
    {% endblock %}

J'ai essayer de les placer dans différentes positions sans succès :
- si j’enlève le lien jquery, mon script ne fonctionne plus.
- si j’enlève le lien bootstrap, mes collapse ne fonctionnent plus correctement.
- si je laisse les deux, seul le premier fonctionne.

Il me semble qu'en théorie seul l'un des deux devrait suffire...
J'ai essayé avec jquery no.conflict(), mais soit j'ai tout fait de travers (ce qui est possible), soit ça ne fonctionne pas non plus.

Quelqu'un aurait-il une idée ?

Merci