https://stackoverflow.com/questions/44305956/collapsible-data-row-with-dynamic-values

by jlspake

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.1/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table>
  <tbody data-bind="foreach: HeaderLines()">
    <tr data-toggle="collapse" data-bind="click: function(d,e){$(e.target).closest('tr').next().slideToggle();}">
      <td>
        <!-- ko if: meterReadings.length > 0-->
        <span class="glyphicon glyphicon-chevron-down"></span>
        <span class="reading-history-data" data-bind="html: monthName"></span>
        <!-- /ko -->
        <!-- ko if: meterReadings.length == 0-->
        <span class="reading-history-data" data-bind="html: monthName"></span>
        <!-- /ko -->
      </td>
      <td>
        <span class="reading-history-data" data-bind="html: latestReadingDate"></span>
      </td>
      <td>
        <span class="reading-history-data" data-bind="html: latestReadingType"></span>
      </td>
      <td>
        <span class="reading-history-data" data-bind="html: latestReadingElectric"></span>
      </td>
      <td>
        <span class="reading-history-data" data-bind="html: latestReadingGas"></span>
      </td>
    </tr>

    <tr style="display:none;">
      <td colspan="5">
        <!--code redacted-->
        <span>extra info goes here</span>
      </td>
    </tr>
  </tbody>
</table>

CSS

table {
  border-collapse: collapse;
}

tr {
  border: 1px solid green;
}

td {
  margin: 0;
  padding: 2px 4px;
}

JavaScript

var viewModel = function() {
  var self = this;
  self.HeaderLines = ko.observableArray([
    { meterReadings: 1, monthName: 'june', latestReadingDate: '6/1/1900', latestReadingElectric: '0.54', latestReadingGas: '54.3', latestReadingType: 'on-site' }, 
    { meterReadings: 1, monthName: 'july', latestReadingDate: '7/1/1900', latestReadingElectric: '0.56', latestReadingGas: '65.1', latestReadingType: 'on-site' } 
  ]);
}

ko.applyBindings(new viewModel());