Implementieren Sie einen Bootstrap-Kollaps mit Zweigschleife

Question

Ich versuche, eine Bootstrap-Kollaps innerhalb einer Zusammenbruch zu implementieren, aber es funktioniert nicht sehr gut.

Dies ist mein Code;

Aber wenn Sie auf Schlitze in Rahmen klicken, schließen sich die Rahmen auch. Ich habe überprüft doppelt meine IDs und die richtigen Zahlen, aber das Problem noch

Answer 1

Vielleicht bleiben, weil Sie die gleiche ID #accordion, aber id sollte eindeutig sein

{#THE FIRST ID#} <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
{% for frame,value in object.getPortHierarchy() %} 
    <div class="panel panel-default"> 
     <div class="panel-heading" role="tab" id="heading-f-{{ frame }}"> 
      <h4 class="panel-title"> 
       <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-f-{{ frame }}" aria-expanded="true" aria-controls="collapse-f-{{ frame }}"> 
        Frame #{{ frame }} 
       </a> 
      </h4> 
     </div> 
     <div id="collapse-f-{{ frame }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-f-{{ frame }}"> 
      <div class="panel-body"> 
     {#HERE#}  <div class="panel-group" id="accordion-{{frame}}" role="tablist" aria-multiselectable="true"> 
       {% for slot,value in value %} 
        <div class="panel panel-default"> 
         <div class="panel-heading" role="tab" id="heading-s-{{ slot }}"> 
          <h4 class="panel-title"> 
        {#HERE#}   <a role="button" data-toggle="collapse" data-parent="#accordion-{{frame}}" href="#collapse-s-{{ slot }}" aria-expanded="true" aria-controls="collapse-s-{{ slot }}"> 
            Slot #{{ slot }} 
           </a> 
          </h4> 
         </div> 
         <div id="collapse-s-{{ slot }}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading-s-{{ slot }}"> 
          <div class="panel-body"> 
           {% for port,value in value %} 
            Port: {{ value }}</br> 
           {% endfor %} 
          </div> 
         </div> 
        </div> 
       {% endfor %} 
       </div> 
      </div> 
     </div> 
    </div> 
{% endfor %} 
</div>