TABLE - ROW EXPANDER

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<table class="table table-responsive table-hover">
  <thead>
        <tr><th></th><th>Name</th><th>Size/Conc</th><th>Nearest Expiration Date</th><th></th></tr>
    </thead>
    <tbody>
        <tr class="clickable" data-toggle="collapse" id="row1" data-target=".row1">
            <td><i class="glyphicon glyphicon-plus"></i></td>
            <td class="header">Morphine</td>
          	<td>50mg/10ml</td>  
            <td>10-31-2016</td>
        </tr>
        <tr class="collapse row1">
            <td></td>
            <td></td>
            <td>Lot #</td>
            <td>Expiration Date</td>
            <td></td>
        </tr>
        
        <tr class="collapse row1">
            <td></td>
            <td></td>
            <td>Lot #</td>
            <td>Expiration Date</td>
            <td></td>
        </tr>
        
        <tr class="collapse row1">
            <td></td>
            <td></td>
            <td>Lot #</td>
            <td>Expiration Date</td>
            <td></td>
        </tr>
        <tr class="clickable" data-toggle="collapse" id="row2" data-target=".row2">
            <td><i class="glyphicon glyphicon-plus"></i></td>
            <td>data</td>
          	<td>data</td>  
            <td>data</td>
        </tr>
        <tr class="collapse row2">
            <td colspan="4">- child data</td>
        </tr>
    </tbody>
</table>

CSS

.hiddenRow {
    padding: 0 !important;
}
.header {
  background: "red";
}

JavaScript

$('.collapse').on('show.bs.collapse', function () {
    $('.collapse.in').collapse('hide');
});