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

私はフィールドをループしてアコーディオン。情報を取得して正しく返します。問題が発生するのは、パネルがクリックされたときに、開いているもう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>

回答：

あなたは <div class="panel panel-default"> これはループの外側に追加されています。これは複数のパネルを持っているためforeachの内側にあるはずです。正しいBootstrapアコーディオン構造を見てみましょう： http://getbootstrap.com/javascript/#collapse-example-accordion