Javascript accordéon avec HTML

**Andromedae93** · 24/09/2018, 09h42

Bonjour tout le monde,

J'essaye d'implémenter dans mon application web un accordéons avec les langages HTML, CSS et JS.
Je suis débutant en JS donc c'est pas évident pour moi de faire marcher cet élément.

Voici mon code HTML :

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
<div class="col-md-12">
      <h3> {% trans "Available publications" %} </h3>
      <hr>
 
      {% for category in category_list %}
        <div class="panel-group accordion" id="accordion_{{ category }}" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion_{{ category }}"
                   href="#collapseOne_{{ category }}" aria-expanded="true" aria-controls="collapseOne">
                  <i class="more-less glyphicon glyphicon-plus"></i>
                  {{ category }}
                </a>
              </h4>
            </div>
            {% for publication in category.publication.all %}
              <div id="collapseOne_{{ category }}" class="panel-collapse collapse" role="tabpanel"
                   aria-labelledby="#accordion_{{ category }}">
                <div class="panel-body">
                  {{ publication }}
                  {% for document in publication.documents.all %}
                    <table class="table table-condensed">
                      <tbody>
                      <tr>
                        <td class="col-md-1">
                          <input type="checkbox" class="fakeRadio" name="DocumentChoice" value="{{ document.id }}"></td>
                        <td class="col-md-1">
                          {% if document.format == 'pdf' %}
                            <span class="badge alert-danger">{{ document.format }}</span>
                          {% endif %}
                          {% if document.format == 'epub' %}
                            <span class="badge alert-info">{{ document.format }}</span>
                          {% endif %}
                        </td>
                        <td class="col-md-1"> {{ document.language }}</td>
                        <td class="col-md-1"> {{ document.title }}</td>
                        <td class="col-md-1">
                          {% if document.publication.new_publication == True %}
                            <span class="glyphicon glyphicon-flag"></span>
                          {% else %}
                            <span></span>
                          {% endif %}
                        </td>
                      </tr>
                      </tbody>
                    </table>
                  {% endfor %}
                </div>
              </div>
            {% endfor %}
          </div>
        </div>
      {% endfor %}
 
    </div>

Et voici mon code JS :

Code :

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
<script>
    var acc = document.getElementById("accordion_{{ category }}");
    var panel = document.getElementById('panel');
 
    for (var i = 0; i < acc.length; i++) {
        acc[i].onclick = function() {
            var setClasses = !this.classList.contains('active');
            setClass(acc, 'active', 'remove');
            setClass(panel, 'show', 'remove');
 
            if (setClasses) {
                this.classList.toggle("active");
                this.nextElementSibling.classList.toggle("show");
            }
        }
    }
 
    function setClass(els, className, fnName) {
        for (var i = 0; i < els.length; i++) {
            els[i].classList[fnName](className);
        }
    }
    </script>

Le but étant de pouvoir ouvrir plusieurs onglets dans l'accordéon en même temps.
Pour l'instant je n'arrive pas à ouvrir ne serait-ce qu'un onglet.

Merci de votre aide