Bootstrap Table - detail view, no plus icon

// Bootstrap Table - detail view without plus icon, to answer https://github.com/wenzhixin/bootstrap-table/issues/964, uses bootstrap-table.10.1.min.js, simple handler, simple css

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.10.1/bootstrap-table.min.js"></script>
<div class="container">
  <div>
    <h1>Example - expand row</h1>
  </div>
  <div id="toolbar">
  </div>
  <table id="myTable" data-toggle="table" data-detail-view="true" data-detail-formatter="detailFormatter">
    <thead>
      <tr>
        <th>Column A</th>
        <th>Column B</th>
        <th>Column C</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>abcd</td>
        <td>other content</td>
        <!-- id number is generated by tt_template -->
        <span style="display: none;" id="desc0">
                    <strong class="bold">Description:</strong>
                    <br>
                    <pre>This is row with id=0, containing other content</pre>
                </span>
      </tr>
      <tr>
        <td>2</td>
        <td>efgh</td>
        <td>another content</td>
        <!-- id number is generated by tt_template -->
        <span style="display: none;" id="desc1">
                    <strong class="bold">Description:</strong>
                    <br>
                    <pre>This is row with id=1, containing another content</pre>
                </span>
      </tr>
    </tbody>
  </table>
</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/


/* Optional theme */


/*@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');*/

body {
  margin: 10px;
}


/*
#myTable thead tr > th.detail > .fht-cell,
#myTable tbody > tr:not(.detail-view) > td:first-of-type > a.detail-icon
{visibility: hidden;
    width: 0px;
    height: 0px;
    display: none;
    position: absolute;}
    */

JavaScript

// Bootstrap Table - detail view without plus icon, to answer https://github.com/wenzhixin/bootstrap-table/issues/964, uses bootstrap-table.10.1.min.js, simple handler, simple css


/* Latest compiled and minified JavaScript included as External Resource */

var $table = $('#myTable');

$table.on('expand-row.bs.table', function(e, index, row, $detail) {
  var res = $("#desc" + index).html();
  $detail.html(res);
});

$table.on("click-row.bs.table", function(e, row, $tr) {

  // prints Clicked on: table table-hover, no matter if you click on row or detail-icon
  console.log("Clicked on: " + $(e.target).attr('class'), [e, row, $tr]);

  // In my real scenarion, trigger expands row with text detailFormatter..
  //$tr.find(">td>.detail-icon").trigger("click");
  // $tr.find(">td>.detail-icon").triggerHandler("click");
  if ($tr.next().is('tr.detail-view')) {
    $table.bootstrapTable('collapseRow', $tr.data('index'));
  } else {
    $table.bootstrapTable('expandRow', $tr.data('index'));
  }
});