JSFiddle - React, Tailwind, and code Playground
by cutsomeat
HTML
<div class="panel panel-default">
<div class="panel-heading">Test Panel</div>
<div class="panel-body">
This is the panel body.
</div>
<div class="list-group clearfix">
<div data-jobid="a5434343g783dfn3" class="list-group-item">
<div class="row">
<div class="col-xs-8">
<h3 class="list-group-item-heading">CHT-0089876-DPE</h3>
</div>
<div class="col-xs-3">
<span class="glyphicon glyphicon-calendar"></span> Due: 16/09/2015
</div>
<div class="col-xs-1">
<div class="pull-right">
<span class="glyphicon glyphicon-time"></span> 3.4
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<p class="list-group-item-text">
STI - NPS [MTT9762] req. 15x dual monitor, D21
</p>
</div>
</div>
<div class="row">
<div class="col-xs-9">
<p class="list-group-item-text">
<span class="glyphicon glyphicon-user"></span>
<small>Jack Turner - 0895532786 - [email protected]</small>
</p>
</div>
<div class="col-xs-3">
<div class="pull-right">
<span class="glyphicon glyphicon-home"></span> D21
</div>
</div>
</div>
</div>
</div>
</div>
CSS
.job-id {
font-size: 1.6em;
font-weight: bold;
}
.list-group-item-text {
font-size: 0.9em;
}
JavaScript
(function($) {
$(".list-group-item").click(function(e) {
var $this = $(this);
$this.addClass("active");
//alert($this.attr("data-jobid"));
});
})(jQuery);