ダイナミックアコーディオンで折りたたむ

Question

<div class="panel-group" id="accordion"> 
     {{#each forms}} 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <a data-toggle="collapse" data-parent="#accordion" href=".collapse"> 
      {{fid}}</a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse"> 
      <div class="panel-body"> 
      {{> form}} 
      </div> 
     </div> 
     </div> 
     {{/each}} 
    </div> 

<template name="form"> 
    <li class="list-group-item list-group-item-warning">First name : {{fname}}</li> 
    <li class="list-group-item list-group-item-warning">Last name : {{lname}}</li> 
    <li class="list-group-item list-group-item-warning">Analysis : {{ydata}}</li> 

</template> 

私は流星とともにブートストラップを使用しています。私は、フォームデータに従って動的にアコーディオンを追加するフォームを作成しました。アコーディオンが正常に追加されます。唯一の問題は、2番目または3番目のアコーディオンをクリックしても、最初のアコーディオンが折り畳まれることです。特定のアコーディオンを動的に追加するときに、どのように崩壊させることができますか？

Answer 1

これは参考になる問題です。あなたのコードを見て、この行

<a data-toggle="collapse" data-parent="#accordion" href=".collapse"> 

は、動的に生成される3つのアコーディオンのそれぞれについて繰り返されます。

意味する各アコーディオンのaタグのhref=".collapse"タグの属性は、常に同じ<div class="panel-collapse collapse">要素を指しています。これは、第2または第3のアコーディオントリガーをクリックしても最初のアコーディオン（最初のタイプ）のみが開く理由を説明しています。

すべてを稼働させるには： クラスの代わりにhref属性を参照する動的に生成されたIDを使用します。換言すれば、これらのラインに沿って増分カウンタなどを使用します。また、コラプスdiv要素に一致するIDが生成されていることを確認してください。例として、あなたのようなものかもしれない：それでは、のようなものになりますアコーディオンの1のために言わせ

<div class="panel-collapse collapse" id="{{dynamicallyGeneratedID}}"> 
    ... 

：

<a data-toggle="collapse" data-parent="#accordion" href="#formOne"> 
    ... 

<a data-toggle="collapse" data-parent="#accordion" href="{{#dynamicallyGeneratedID}}"> 
    ... 

を、あなたのようなものを持っている可能性があり

、パネル本体も次のようになります。

<div class="panel-collapse collapse" id="formOne"> 
    ... 

すべての運が最高です！