"Table of items with collapsible details"
Bootstrap 3.1.0 Snippet by bpichot

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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="table-responsive">
<table class="table table-condensed">
<thead>
<tr>
<th>Deliverable</th>
<th>Description</th>
<th>Ending on</th>
<th>Status</th>
<th>Progress</th>
</tr>
</thead>
<tbody>
<tr class="clickable warning dropdown-deliverable" data-for="#details_1">
<td>uranium</td>
<td>magic potion</td>
<td>April 23, 2014</td>
<td><span class="label label-info">Ongoing</span></td>
<td>
<div class="progress">
<div class="progress-bar progress-bar-danger" style="width: 40%;">
40%
</div>
</div>
</td>
</tr>
<tr style="padding:0">
<td style="padding:0"></td>
<td colspan=2 style="padding:0px;">
<div class="deliverable-infos" id="details_1">
<table class="table table-condensed table-user-content" id="hidden_table_1">
<tbody>
<tr>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
.clickable {
cursor: pointer;
}
.right-col {
text-align: center;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function() {
$('.deliverable-infos').hide();
$('.dropdown-deliverable').on('click', function(e) {
console.log("dropdown toggled!");
e.preventDefault();
e.stopPropagation();
//get targeted element via data-for attribute
var dataFor = $(this).data('for');
var idFor = $(dataFor);
idFor.slideToggle();
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard 2
Bootstrap Tabs with Table
Creative Princing Table
BS4 Simple & Clean Pricing table

Questions / Comments: