アコーディオンテーブルは、クリックすると1つの行しか表示されません（ブートストラップ）

Question

「ヘッダー」行をクリックしたときにのみ表示される非表示の行を持つテーブル/アコーディオンのものを作成しました。残念ながら、この表では、クリックするヘッダーごとに1行しか表示されません。

jsfiddle

、コードを見るとわかるように、各ヘッダー行（例： "9 /部品点検"）（ "9.1" と "9.2" EX）隠されている二つのサブ列を有しています。クリックすると、最初のもの（9.1）のみが表示され、他のもの（9.2など）は表示されるはずです。

私は混乱しているclass/idの名前に問題があると仮定していますが、私が物を与える名前が何であれ、それはまだ動作しません。

<table id="tbl-sample-values" class="table table-condensed table-bordered table-hover" style="font-size:85%;"> 
    <thead> 
     <tr class="tabletop"> 
      <th>Step #</th> 
      <th>Processing Step</th> 
      <th>Barcode</th> 
     </tr> 
    </thead> 

    <tbody> 

     <tr data-toggle="collapse" data-target="#accordion" class="clickable row-header"> 
      <td>9</td> 
      <td colspan="2">Parts Inspection</td> 
     </tr> 

     <tr id="accordion" class="collapse"> 
      <td>9.1</td> 
      <td>Handle silicon electrodes...</td> 
      <td>[Barcode here]</td> 
     </tr> 

     <tr id="accordion" class="collapse"> 
      <td>9.2</td> 
      <td>Verify part number...</td> 
      <td>[Barcode here]</td> 
     </tr> 

     <tr data-toggle="collapse" data-target="#accordion2" class="clickable row-header"> 
      <td>10</td> 
      <td colspan="2">IPA Clean</td> 
     </tr> 

     <tr id="accordion2" class="collapse"> 
      <td>10.1</td> 
      <td>Place part with frontside facing up...</td> 
      <td>[Barcode here]</td> 
     </tr> 

     <tr id="accordion2" class="collapse"> 
      <td>10.2</td> 
      <td>Wipe the part using cleanroom wiper...</td> 
      <td>[Barcode here]</td> 
     </tr> 

    </tbody> 
</table> 

Answer 1

一意のIDの代わりに同じクラスを指定します。このクラスをデータターゲットとして使用します。例：

<tr data-toggle="collapse" data-target=".my-row" class="clickable row-header"> 
    <td>9</td> 
    <td colspan="2">Parts Inspection</td> 
</tr> 

<tr id="accordion" class="my-row collapse"> 
    <td>9.1</td> 
    <td>Handle silicon electrodes...</td> 
    <td>[Barcode here]</td> 
</tr> 

<tr id="accordion" class="my-row collapse"> 
    <td>9.2</td> 
    <td>Verify part number...</td> 
    <td>[Barcode here]</td> 
</tr> 

これが役立ちます。