"accordion tables"
Bootstrap 3.0.0 Snippet by cassolmc

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="col-lg-10"> <div class="panel-group" id="accordion"> <!-- Packages Panel --> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title" data-toggle="collapse" data-target="#collapseZero"> <a href="#"><small><span class="glyphicon glyphicon-menu-right"></span></small></a> Informações </h4> </div> <div id="collapseZero" class="panel-collapse collapse in"> <div class="panel-body"> <div class="row"> <div class="col col-md-10 col-md-offset-1"> {{ lib.render_field(form, form.email) }} {{ lib.render_field(form, form.customer) }} {{ lib.render_field(form, form.block_after, kwargs={'data-date-format':'YYYY-MM-DD 00:00:00', 'date-role':'datetimepicker'}) }} </div> </div> </div> </div> </div> <!-- Licenses Panel --> <div class="panel panel-primary"> <div class="panel-heading"> <h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne"> <a href="#"><small><span class="glyphicon glyphicon-menu-right white"></span></small></a> Licenças perpetuas </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="panel-table panel panel-default"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">Audaces Encaixe</h3> </div> <div class="col col-xs-6 text-right"> <button type="button" class="btn btn-sm btn-primary btn-create">Create New</button> </div> </div> </div> <div class="panel-body"> <table class="table table-bordered table-list"> <thead> <tr> <th class="hidden-xs"></th> <th>Version</th> <th>Quantidade</th> <th>Data de expiração</th> </tr> </thead> <tbody> <tr> <td align="center"> <a class="btn btn-sm btn-default"><span class="fa fa-pencil"></span></a> <a class="btn btn-sm btn-danger"><span class="fa fa-trash"></span></a> </td> <td>14</td> <td> 2</td> <td> -- </td> </tr> <tr> <td align="center"> <a class="btn btn-sm btn-default"><span class="fa fa-pencil"></span></a> <a class="btn btn-sm btn-danger"><span class="fa fa-trash"></span></a> </td> <td>14</td> <td> 1</td> <td> 22/11/2017 </td> </tr> </tbody> </table> </div> </div> <!-- Panel Table --> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">Audaces Moldes</h3> </div> <div class="col col-xs-6 text-right"> <button type="button" class="btn btn-sm btn-primary">Create New</button> </div> </div> </div> <div class="panel-body"> <table class="table table-bordered table-list"> <thead> <tr> <th class="hidden-xs"></th> <th>Version</th> <th>Quantidade</th> <th>Data de expiração</th> </tr> </thead> <tbody> <tr> <td align="center"> <a class="btn btn-sm btn-default"><span class="fa fa-pencil"></span></a> <a class="btn btn-sm btn-danger"><span class="fa fa-trash"></span></a> </td> <td align="center">14</td> <td align="center"> 2</td> <td align="center"> -- </td> </tr> </tbody> </table> </div> </div> <!-- Panel Table --> <div class="panel panel-default panel-table"> <div class="panel-heading"> <div class="row"> <div class="col col-xs-6"> <h3 class="panel-title">Audaces Digiflash</h3> </div> <div class="col col-xs-6 text-right"> <button type="button" class="btn btn-sm btn-primary btn-create">Create New</button> </div> </div> </div> <div class="panel-body"> <table class="table table-bordered table-list"> <thead> <tr> <th class="hidden-xs"></th> <th>Version</th> <th>Quantidade</th> <th>Data de expiração</th> </tr> </thead> <tbody> <tr> <td align="center"> <a class="btn btn-sm btn-default"><em class="fa fa-pencil"></em></a> <a class="btn btn-sm btn-danger"><em class="fa fa-trash"></em></a> </td> <td>5</td> <td> 1 </td> <td> -- </td> </tr> </tbody> </table> </div> </div> <!-- Panel Table --> </div> </div> </div> </div> </div>

Related: See More


Questions / Comments: