ループを使用してアコーディオンを作成する - ブートストラップ

Question

私はアコーディオンを作成するためにフィールドをループしています。それは情報を得て、それを正しく返しています。パネルがクリックされたときに、開いているもう1つのパネルが折りたたまれていないことだけが問題です。任意のアイデアをどのようにこれを修正するには？

 #elseif ($column.getChild("features").value == "Accordion") 
      #set ($accordions = $_XPathTool.selectNodes($column, "accordion")) 
      #set ($accHeading = $column.getChild("accHeading").value)  

      <h2>$_SerializerTool.serialize($column.getChild("accHeading"), true)</h2> 
      <div class="panel-group" id="accordian"> 
       <div class="panel panel-default">  

      #foreach ($accordion in $accordions) 
       #set ($accTitle = $accordion.getChild("accTitle").value) 
       #set ($accContent = $accordion.getChild("accContent").value) 

        <div class="panel-heading">  
         <h4 class="panel-title"> 
           <a data-toggle="collapse" data-parent="#accordion" href="#collapse${foreach.index}">${accTitle}</a> 
         </h4> 
        </div> 
         <div id="collapse${foreach.index}" class="panel-collapse collapse"> 
          <div class="panel-body">${accContent}</div> 
         </div> 
      #end 
       </div> 
      </div> 

Answer 1

あなたは<div class="panel panel-default">は、複数のパネルを持っているので、これはforeachの内にある必要があり、ループの外に追加されました。 http://getbootstrap.com/javascript/#collapse-example-accordion