Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

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">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.8.0/bootstrap-table.min.css">
<div class="container">
    <div>
        <h1>Example - 3 column div</h1>
        <div class="row">
          <div class="col-xs-6 col-md-4">First</div>
          <div class="col-xs-6 col-md-4">Second</div>
          <div class="col-xs-6 col-md-4">Third</div>
        </div>
</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;
}

JavaScript

/* 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);
    console.log('row expanded', e, index);
});

$table.find("tr>td>.detail-icon").on('click',function(e){
    // NOTE - I assume expand-row behaivour added in bootstrap-table.js with a += or similar, so adding this here doesnt break that but does stop propagation
    
    // https://developer.mozilla.org/en-US/docs/Web/API/Event
    
    e.preventDefault();
    e.stopPropagation(); // need at least this line
    // e.stopImmediatePropagation(); // not sure how is different from above line
});
    


$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);
   
    
    // In my real scenarion, trigger expands row with text detailFormatter..
    //$tr.find(">td>.detail-icon").trigger("click");
    $tr.find(">td>.detail-icon").triggerHandler("click");
    
});