IOS accordion table can not move the solution

I have 1 accordion on the table on all devices and the browser works properly, but doesn't work at all on ios mobile. I found a solution for div and href only, but for me, I really need to use a few columns in the table. Here, you have I use bootstrap code http: / / jsfiddle net/k3yrnsux /.

  <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;
}

Solutions:

I have run to the iOS question as well as the guide.
For some reason, if you manually attach the click event tr element it works less than the problem, but you can't pass the extra attributes on the selector.
http://jsfiddle.net/8x3ub2xz/
Does it seem only a matter of attaching click events when additional properties are passed to the selector? I don't know why.
will

$(document).ready(function () {

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

});

Instead of

$(document).ready(function () {

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

});

The above is the article to share all the content, I hope you can like.