Dynamisch erstellte Akkordeons funktionieren nicht richtig in Django/Python/HTML Projekt

Question

Ich versuche eine HTML-Vorlage als Teil eines Django-Projekts zu erstellen. Es würde dynamische Akkordeons enthalten (die Anzahl solcher Akkordeons wird durch den Wert bestimmt, der von saves.py an es übergeben wird), und der Inhalt in jedem wird auch dynamisch von ansichten.py übergeben (ich habe diesen Teil noch nicht einmal gebaut).

Ich habe Googeln versucht, aber immer mit einem von zwei Szenarien enden. Eine, bei der alle Akkordeonknöpfe nur das erste Akkordeon öffnen/schließen. Zwei, keiner der Akkordeonknöpfe funktioniert. Im Idealfall sollten alle Akkordeonknöpfe funktionieren und sie müssen jeweils ihren eigenen Inhalt öffnen/schließen. Ich vermute, das Problem liegt darin, dynamisch auf das div zu verweisen, das den Inhalt enthält. Aber ich kann keine Lösung finden.

Bitte helfen!

Code:

<div class="container"> 
    <h2>Mock Tests</h2> 
    <p>Click the category you wish to view.</p> 
    @{int i=0;} 
    {% for s in sections %} 
    <div class="panel-group" id="accordion_@i"> 
    <div class="panel panel-default" id="panel_@i"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#collapseone_@i" href="#collapseOne_@i">{{ s.s_name }}</button> 
     </h4> 
     </div> 
     <div id="collapseOne_@i" class="panel-collapse collapse in"> 
     <div class="panel-body">{{ s.s_name }}</div> 
     </div> 
    </div> 
    </div> 
    i++; 
    {% endfor %} 
    </div> 

Modified Code:

{% block body %} 
<div class="container"> 
    <h2>Mock Tests</h2> 
    <p>Click the category you wish to view.</p> 

    <div class="panel-group" id="accordion"> 
    {% for s in sections %} 
    <div class="panel panel-default"> 
     <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <button type="button" class="btn btn-info" data-parent="#accordion" data-toggle="collapse" data-target="accordion_{{ forloop.counter }}" href="accordion_{{ forloop.counter }}">{{ s.s_name }}</button> 
     </h4> 
     </div> 
     <div id="accordion_{{ forloop.counter }}" class="panel-collapse collapse in"> 
     <div class="panel-body">{{ s.s_name }}</div> 
     </div> 
    </div> 
    {% endfor %} 
    </div>  
    </div> 

Answer 1

Ich weiß nicht, was die @{int i=0;} soll tun werden, aber Sie müssen entweder eine for-Schleife verwenden und sehen ein Abschnitt mit dem Index davon, oder Sie können den Forloop-Zähler verwenden, oder geben Sie einfach die ID einen besseren Namen

id="accordion_{{ forloop.counter }}" 
id="accordion_{{ forloop.counter0 }}" 
id="accordion_{{ s.s_name }}" 

Jeder sollte ausreichen.