Таблица аккордеона отображает только одну строку при нажатии (bootstrap)

Question

Я сделал таблицу/аккордеон, у которой есть скрытые строки, которые видны только при нажатии на строку заголовка. К сожалению, в таблице отображается только одна строка для каждого выбранного вами заголовка.

jsfiddle

Как вы можете видеть в коде, каждая строка заголовка (например: «9/Части Inspection») имеет два субсчета строки, которые скрыты (например: «9,1» и «9,2»). Когда вы нажимаете, появляется только первый (9.1), оставляя остальных (9.2 и любые другие, которые я добавляю) скрытыми, когда они должны отображаться.

Я предполагаю, что проблема в том, что имена классов/идентификаторов путаются, но независимо от того, какие разные имена я даю, это все равно не работает.

<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

Дайте вашему tr один и тот же класс вместо уникального идентификатора. Используйте этот класс в качестве целевого объекта данных. Например:

<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> 

Надеюсь, это поможет.