Бутстрап свернуть таблицу строк

Question

Я пытаюсь построить таблицу, где свертываются только некоторые строки (только первая строка в этом примере).

Когда я нажимаю на «Recevability», эффект сжимания и разворота работал отлично, но проблема в том, что у меня такое же поведение, когда я нажимаю на одну из строк ... Я хотел бы увидеть эффект сжимания и расширения только когда я нажимаю на «Приемность».

Вот код:

<div id="feat-exam" class="panel panel-info"> 
    <div class="panel-heading"> 
    <ul class="list-group"> 
     <li class="list-group-item" data-toggle="collapse" data-target=".RECEV"> 
     <strong>Recevability</strong> 
     <table> 
      <tr class="collapse RECEV"> 
      <td> 
       <em>item1.1</em> 
      </td> 
      <td> 
       <em>item1.2</em> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <em>item2.1</em> 
      </td> 
      <td> 
       <em>item2.2</em> 
      </td> 
      </tr> 
     </table> 
     </li> 
    </ul> 
    </div> 
</div> 

Вы можете попробовать себя на jsfiddle: collapsing rows table on jsfiddle

Может кто-нибудь из вас смотрели?

Answer 1

Если вы переместите стол в другой li и поместите сильный тег в первую очередь, вы получите результаты, которые вы ищете. Вот мой взгляд на него:

<div id="feat-exam" class="panel panel-info"> 
    <div class="panel-heading"> 
    <ul class="list-group"> 
     <li class="list-group-item" data-toggle="collapse" data-target=".RECEV" style="display:true"> 
     <strong>Recevability</strong> 
     </li> 
     <li class="collapse RECEV"> 

     <table style="width:100%"> 
      <tr> 
      <td> 
       <em>item1.1</em> 
      </td> 
      <td> 
       <em>item1.2</em> 
      </td> 
      </tr> 
      <tr> 
      <td> 
       <em>item2.1</em> 
      </td> 
      <td> 
       <em>item2.2</em> 
      </td> 
      </tr> 
     </table> 
     </li> 
    </ul> 
    </div> 
</div> 

https://jsfiddle.net/f030he9x/