javascript - How to expand a table to add more information in an accordion style in AngularJS -

i've been having lot of hiccups making work. want able click on row on table expand row , provide additional information within there. want toggled accordion style (drawers), can open multiple @ once. code below.

<div class="row">     <div class="col-md-11">     <table class="table table-hover table-bordered">         <thead>         <tr>             <th>s</th>             <th>r</th>             <th>se</th>             <th>d</th>             <th>ser</th>             <th>l</th>         </tr>         </thead>          <tbody>         <tr ng-repeat="x in projects | filter:query | filter:quer | orderby:orderprop">             <td><b>{{x.a}}</b></td>             <td>{{x.b}}</td>             <td><u>{{x.c}}</u></td>             <td>{{x.d}}</td>             <td>{{x.e}}</td>             <td>{{x.f}}</td>         </tr>         </tbody>     </table>     </div> </div> 

it forms table 6 columns loop through records , produce many sets of information. want able give these rows ability expand , collapse on click.

http://plnkr.co/edit/co7zhudbfr9tzxgtqfgz

thanks.

you may use angular-ui-bootstrap provides set of angularjs directives based on twitter bootstrap's markup , css, , iterate through data using ng-repeat on <accordion>.

  <accordion-group  ng-repeat="x in pro | orderby:orderprop">       <accordion-heading>         <div class="row">           <div class="cell"><b>{{x.a}}</b></div>           <div class="cell">{{x.b}}</div>           <div class="cell"><u>{{x.c}}</u></div>           <div class="cell">{{x.d}}</div>           <div class="cell">{{x.e}}</div>           <div class="cell">{{x.f}}</div>         </div>       </accordion-heading>     <div>      test data    </div>    </accordion-group> </accordion> 

further, may use css display tabular data

.table{   display: table;   width:100% } .row{   display: table-row; } .cell{   display: table-cell;    width:20% } 

the advantage of using ui-bootstrap is, provide access native angularjs directives without dependency on jquery or bootstrap's javascript.

here's updated plunkr