클릭했을 때 아코디언 테이블에 한 행만 표시됩니다 (부트 스트랩)

Question

"헤더"행을 클릭했을 때만 표시되는 숨겨진 행이있는 표/아코디언을 만들었습니다. 불행하게도, 테이블은 클릭하는 각 헤더에 대해 하나의 행만 표시합니다.

jsfiddle

당신이 코드에서 볼 수 있듯이

각 헤더 행 (예 : "9/부품 검사")이 숨겨져있는 두 개의 하위 행이 있습니다 (예 : "9.1"와 "9.2"). 클릭 할 때 첫 번째 것 (9.1) 만 나타나고 다른 것들 (9.2와 내가 추가 한 다른 것들)은 보이게 될 때 숨겨집니다.

혼란스러워하는 클래스/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을 부여하십시오. 이 클래스를 데이터 타겟으로 사용하십시오. 예 :

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

이 정보가 도움이되기를 바랍니다.