我想在表行中使用bootstrap collapse，但它的工作方式就像切换一样

Question

我想在表中使用bootstrap collapse来显示行中的数据。当用户单击特定行时，它将展开行并显示更多信息。但是当用户点击任何其他行时它将展开，扩展的行信息将是不可见的。但它没有发生。它像切换一样工作

我的代码是：

<div class="container">
  <div class="panel-group" id="accordion">

      <table class="table table-striped">
         <thead>
          <tr>
            <th> ID </th>
            <th>Name</th>
            <th>points</th>
        </thead>
        <tbody>
         {% for post in posts %}
            <tr>

             <td> 
                <div class="panel panel-default">
                  <div class="panel-heading">
                  <h4 class="panel-title">
                    <a class="detail" data-toggle="collapse" data-parent="#accordion" href="#{{post.Driver.driverId}}"> {{post.Driver.driverId}}
                    </a>  
                   </h4>
                  </div> 
                  <div id="{{post.Driver.driverId}}" class="panel-collapse collapse">
                    <div class="panel-body">  {{post.Driver.givenName}}
                    </div>
                  </div>
                </div>    
           </td>
             <td>
                  {{post.Driver.givenName}} &nbsp; {{post.Driver.familyName}}
            </td>
            <td>{{post.points}}</td>

           </tr> 
        {% endfor %}
        </tbody>
  </table>
 </div>