複数のブートストラップテーブル行を展開/折りたたむ

Question

私は、デフォルトで3行のデータとヘッダー行を示すブートストラップテーブルを持っています。行5には「more ...」と表示されているボタンがあります。クリックすると、残りのテーブル行がスライドして表示されます。

<table class="table table-condensed table-hover table-striped table-responsive table-noTopBorder noBottomMargin"> 
    <tr> 
     <th>Date</th> 
     <th>Title</th> 
    </tr> 
    <tr> 
     <td>07/11/2017</td> 
     <td><a href="#" target="_blank">CLE by the Sea Ethics</a></td> 
    </tr> 
    <tr> 
     <td>07/12/2017</td> 
     <td><a href="#" target="_blank">CLE by the Sea Family Law Day 1</a></td> 
    </tr> 
    <tr> 
     <td> 
      07/13/2017 
     </td> 
     <td><a href="#" target="_blank">CLE by the Sea Family Law Day 2</a></td> 
    </tr> 
    <tr id="moreCLEEvents" class="collapse out"> 
     <td> 
      08/07/2017 
     </td> 
     <td><a href="#" target="_blank">Professionalism in the Workplace</a></td> 
    </tr> 
    <tr> 
     <td> 
      <a href="#" class="btn btn-primary btn-xs" data-toggle="moreCLEEvents">more...</a> 
     </td> 
     <td> 
      <a href="#" class="btn btn-primary btn-xs" target="_blank">Calendar View</a> 
     </td> 
    </tr> 
</table> 

は、私は、複数行のグループを個別のテーブルの行を非表示ではなく/表示するための様々な方法を示して記事を見つけています。 tbodyは高さがないので崩壊が失敗するので私はtbodyを使うことができません。

Answer 1

あなたは隠されたクラス（表示：なし）を適用することができ、ボタンの後にすべてのTRにして、jqueryのを使用します。

$('a[data-toggle="moreCLEEvents"]').click(function() { 
    $(this).closest('tr').nextAll('tr').slideToggle(); 
}); 

フィドル：https://jsfiddle.net/x5cdrpwj/