Django: Bootstrap Akkordeon nicht arbeitet Regroup Inhalt

Question

Django mit Bootstrap 3

ich für ein FAQ-System auf eine Dashboard-Ansicht arbeite. Ich habe die Artikel gruppiert nach Sektionen eingerichtet. Die Abschnittsnamen sind die Kopfzeilen in einer Listengruppe, die beim Anklicken eine weitere Listengruppe mit allen zu dieser Gruppe gehörenden Artikeln erweitert.

Das Problem, das ich habe, ist, dass ich den Zusammenbruch einrichten möchte, um wie ein Akkordeon zu arbeiten. Ich habe die Anleitung von Bootstrap 3 befolgt, um dies zu erreichen, aber wenn ich auf einen neuen Abschnitt klicke, wird keiner der vorherigen offenen Abschnitte geschlossen. Ich habe andere Anleitungen ausgeschöpft, aber der Code sieht korrekt aus, aber die Akkordeonfunktion funktioniert nicht.

Mein Code:

{% block content %} 
<div class="iron-faq"> 
    <div class="container"> 
     <div class="col-md-6"> 
      <h3>Sections</h3> 
      <div class="list-group" id="accordion" aria-multiselectable="true"> 
      {% regroup articles by section as section_list %} 


       {% for section in section_list %} 
        <a href="#section-{{ section.grouper.id }}" 
         class="list-group-item list-header" 
         data-toggle="collapse" 
         data-parent="#accordion" 
         data-target="#section-{{ section.grouper.id }}" 
         aria-controls="section-{{ section.grouper.id }}"> 
         <i class="fa fa-bars"></i> {{ section.grouper }} 
         <span class="badge pull-right">{{ section.grouper.article_count }}</span> 
        </a> 
        <div class="panel-collapse collapse" id="section-{{ section.grouper.id }}"> 
         {% for article in section.list %} 
          <a href="{{ article.get_absolute_url }}" class="list-group-item"> 
           {{ article.title }} 
          </a> 
         {% endfor %} 
        </div> 
       {% endfor %} 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <h3>Useful Articles</h3> 
      <div class="list-group"> 
       <div class="favorites"> 
       {% for favorite in favorites %} 
        <a href="{{ favorite.get_absolute_url }}" class="list-group-item"> 
         <h5 class="list-group-item-heading">{{ favorite.title }}</h5> 
         <p class="list-group-item-text">{{ favorite.section.name }}</p> 
        </a> 
       {% endfor %} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
{% endblock %} 

Answer 1

Sie haben jeden Abschnitt wickeln mit:

{% block content %} 
<div class="iron-faq"> 
    <div class="container"> 
     <div class="col-md-6"> 
      <h3>Sections</h3> 
      <div class="list-group" id="accordion" aria-multiselectable="true"> 
      {% regroup articles by section as section_list %} 


       {% for section in section_list %} 
        <div class="panel"> 
         <a href="#section-{{ section.grouper.id }}" 
          class="list-group-item list-header" 
          data-toggle="collapse" 
          data-parent="#accordion" 
          data-target="#section-{{ section.grouper.id }}" 
          aria-controls="section-{{ section.grouper.id }}"> 
          <i class="fa fa-bars"></i> {{ section.grouper }} 
          <span class="badge pull-right">{{ section.grouper.article_count }}</span> 
         </a> 
         <div class="panel-collapse collapse" id="section-{{ section.grouper.id }}"> 
          {% for article in section.list %} 
           <a href="{{ article.get_absolute_url }}" class="list-group-item"> 
            {{ article.title }} 
           </a> 
          {% endfor %} 
         </div> 
        </div> 
       {% endfor %} 
      </div> 
     </div> 
     <div class="col-md-6"> 
      <h3>Useful Articles</h3> 
      <div class="list-group"> 
       <div class="favorites"> 
       {% for favorite in favorites %} 
        <a href="{{ favorite.get_absolute_url }}" class="list-group-item"> 
         <h5 class="list-group-item-heading">{{ favorite.title }}</h5> 
         <p class="list-group-item-text">{{ favorite.section.name }}</p> 
        </a> 
       {% endfor %} 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
{% endblock %} 

this helps:

<div class="panel"></div> 

So Ihre html wie folgt aussehen würde!