<div class="table-content">
  <table id="table-collapse" class="table table-responsive table-hover table-striped" style="border-collapse:collapse;">
    <thead>
      <tr>
        <th>#</th>
        <th>Date</th>
        <th>Description</th>
        <th>Credit</th>
        <th>Debit</th>
        <th>Balance</th>
      </tr>
    </thead>
    <tbody>
      <tr data-toggle="collapse" data-target="#demo1" data-parent="table-collapse" class="accordion-toggle">
        <td>1</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$150.00</td>
        <td class="text-error"></td>
        <td class="text-success">$150.00</td>
      </tr>
      <tr>
        <td colspan="6" class="hiddenRow">
          <div class="accordian-body collapse" id="demo1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada ligula non semper facilisis. Sed mattis libero vel convallis tincidunt. Sed tempor auctor ultrices.</div>
        </td>
      </tr>
      <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle accordion-group">
        <td>2</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$11.00</td>
        <td class="text-error"></td>
        <td class="text-success">$161.00</td>
      </tr>
      <tr>
        <td colspan="6" class="hiddenRow">
          <div id="demo2" class="accordian-body collapse">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada ligula non semper facilisis. Sed mattis libero vel convallis tincidunt. Sed tempor auctor ultrices.</div>
        </td>
      </tr>
      <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
        <td>3</td>
        <td>05 May 2013</td>
        <td>Credit Account</td>
        <td class="text-success">$500.00</td>
        <td class="text-error"></td>
        <td class="text-success">$661.00</td>
      </tr>
      <tr>
        <td colspan="6" class="hiddenRow">
          <div id="demo3" class="accordian-body collapse">
            <table class="table table-responsive table-striped table-hover">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Date</th>
                  <th>Description</th>
                  <th>Credit</th>
                  <th>Debit</th>
                  <th>Balance</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>05 May 2013</td>
                  <td>Credit Account</td>
                  <td class="text-success">$150.00</td>
                  <td class="text-error"></td>
                  <td class="text-success">$150.00</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>05 May 2013</td>
                  <td>Credit Account</td>
                  <td class="text-success">$150.00</td>
                  <td class="text-error"></td>
                  <td class="text-success">$150.00</td>
                </tr>
            </table>
          </div>
        </td>
      </tr>
      </tbody>
  </table>
</div>
  function (o) {
  var s = t(this);
  s.attr("data-target") || o.preventDefault();
  var n = e(s),
    a = n.data("bs.collapse"),
    r = a ? "toggle" : t.extend({}, s.data(), {
      trigger: this
    });
  i.call(n, r)
}
  .hiddenRow {
  padding:0px!important;
}
.hiddenRow div {
  margin: 20px;
  white-space:normal;
}

$(document).ready(function () {

  $("tr").click(function () {
    var sender = $(this);
    var targetId = $(sender.attr("data-target"))
    targetId.toggle().collapse();
  });

});

$(document).ready(function () {

  $("tr [data-toggle='collapse']").click(function () {
    var sender = $(this);
    var targetId = $(sender.attr("data-target"))
    targetId.toggle().collapse();
  });

});