content logo
Bootstrap Tables: Bootstrap Collapsing / Expanding Table

Tables are always very useful for showing a set of data and help the data to be displayed regularly, but sometimes we may not want the whole table to be displayed normally and show each set of rows together In such cases, we can use the following code that the headers of each set are shown and by clicking on it, the table opens for us and we can see its data.

#Bootstrap Sortable Table # Bootstrap Table Pagination # Bootstrap Table Search # Bootstrap Table Export
<!-- this script got from www.frontendfreecode.com -->
<div class="container"> <table class="table table-bordered"> <tr class="header"> <td colspan="2">Header 1</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr class="header"> <td colspan="2">Header 2</td> </tr> <tr> <td>date</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr class="header"> <td colspan="2">Header 3</td> </tr> <tr> <td>date</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr class="header"> <td colspan="2">Header 4</td> </tr> <tr> <td>date</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> <tr> <td>data</td> <td>data</td> </tr> </table> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
body {
    color: #6a6c6f;
    background-color: #f1f3f6;
    margin-top: 30px;
}

.container {
    max-width: 960px;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > thead > tr.active > th,
.table > thead > tr > td.active,
.table > thead > tr > th.active {
    background-color: #fff;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-color: #e4e5e7;
}

.table tr.header {
    font-weight: bold;
    background-color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}

.table tr:not(.header) {
    display: none;
}

.table .header td:after {
    content: "\002b";
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
    color: #999;
    text-align: center;
    padding: 3px;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}

.table .header.active td:after {
    content: "\2212";
}
$(document).ready(function () {
    //Fixing jQuery Click Events for the iPad
    var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";
    if ($('.table').length > 0) {
        $('.table .header').on(event, function () {
            $(this).toggleClass("active", "").nextUntil('.header').css('display', function (i, v) {
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
    }
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<style>
body {
    color: #6a6c6f;
    background-color: #f1f3f6;
    margin-top: 30px;
}

.container {
    max-width: 960px;
}

.table > tbody > tr.active > td,
.table > tbody > tr.active > th,
.table > tbody > tr > td.active,
.table > tbody > tr > th.active,
.table > tfoot > tr.active > td,
.table > tfoot > tr.active > th,
.table > tfoot > tr > td.active,
.table > tfoot > tr > th.active,
.table > thead > tr.active > td,
.table > thead > tr.active > th,
.table > thead > tr > td.active,
.table > thead > tr > th.active {
    background-color: #fff;
}

.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
    border-color: #e4e5e7;
}

.table tr.header {
    font-weight: bold;
    background-color: #fff;
    cursor: pointer;
    -webkit-user-select: none;
    /* Chrome all / Safari all */
    -moz-user-select: none;
    /* Firefox all */
    -ms-user-select: none;
    /* IE 10+ */
    user-select: none;
    /* Likely future */
}

.table tr:not(.header) {
    display: none;
}

.table .header td:after {
    content: "\002b";
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    float: right;
    color: #999;
    text-align: center;
    padding: 3px;
    transition: transform .25s linear;
    -webkit-transition: -webkit-transform .25s linear;
}

.table .header.active td:after {
    content: "\2212";
}
</style>

</head>
<body>
<div class="container">
  <table class="table table-bordered">
    <tr class="header">
      <td colspan="2">Header 1</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="header">
      <td colspan="2">Header 2</td>
    </tr>
    <tr>
      <td>date</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="header">
      <td colspan="2">Header 3</td>
    </tr>
    <tr>
      <td>date</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr class="header">
      <td colspan="2">Header 4</td>
    </tr>
    <tr>
      <td>date</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
    <tr>
      <td>data</td>
      <td>data</td>
    </tr>
  </table>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$(document).ready(function () {
    //Fixing jQuery Click Events for the iPad
    var ua = navigator.userAgent,
        event = (ua.match(/iPad/i)) ? "touchstart" : "click";
    if ($('.table').length > 0) {
        $('.table .header').on(event, function () {
            $(this).toggleClass("active", "").nextUntil('.header').css('display', function (i, v) {
                return this.style.display === 'table-row' ? 'none' : 'table-row';
            });
        });
    }
})
</script>

</body>
</html>
Preview