Javascript accord�on avec HTML

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:

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:

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 ;)