1つの見出しの下に複数のパネル本体を折りたたみます。

Question

私は、特定のパーツだけをスライドさせて閉じるブートストラップを備えた折りたたみ可能なパネルを作成しています。したがって、下のコードでは、ヘッダーをクリックしたときにpanel-body-1とpanel-body-2がアニメートされるようにしたいと考えています。パネルティーザー1とパネルティーザー2は開いたままです。これは可能ですか？ありがとうございました。

<div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" 
      href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Panel-Header-1 
     </a> 
     </h4> 
    </div> 
    <div class="panel-teaser panel-body" > 
     Panel-Teaser-1 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" 
     role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body"> 
     Panel-Body-1 
     </div> 
    </div> 
     <div class="panel-teaser panel-body" > 
     Panel-Teaser-2 
    </div> 
     <div id="collapseTwo" class="panel-collapse collapse in" 
     role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body"> 
     Panel-Body-2 
     </div> 
    </div> 
    </div> 

Answer 1

私は（何を持っていることはdocumentationからの例のようにたくさん見える）あなたはブートストラップバージョン3を使用していると仮定しています。

あなたは<a>タグの代わりに<button>タグを使用する場合は、することができますあなたがdata-target属性に崩壊する要素について簡単にカンマで別々の複数のID。

<h4 class="panel-title"> 
    <button type="button" class="btn btn-link dropdown-toggle" 
    data-toggle="collapse" data-target="#collapseOne,#collapseTwo"> 
     Panel-Header-1 
    </button> 
</h4> 

実施例は、はい、それは素晴らしいです。このjsfiddle