<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h3>ILM Level 7 Certificate in Executive Coaching and Mentoring (Open Course - FEB 2016)</h3>
<hr>
<p>Use the timeline below as a tool to make sure you stay on track with your cohort and cross the finish line to gaining your qualification.</p>
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Module 1: ILM Level 7 Certificate in Executive Coaching & Mentoring</h3>
<div class="pull-right">
</div>
</div>
<table class="table">
<tbody>
<tr class="section">
<td>Completed</td>
<td>Week</td>
<td>What to work on</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Joining Instructions</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Pre Course Reading and Preparation Work</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Classroom Days 1 & 2</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Module 2: ILM Level 7 Certificate in Executive Coaching & Mentoring</h3>
<div class="pull-right">
</div>
</div>
<table class="table">
<tbody>
<tr class="section">
<td>Completed</td>
<td>Week</td>
<td>What to work on</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Joining Instructions</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Pre Course Reading and Preparation Work</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Classroom Days 3 & 4</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Module 3: ILM Level 7 Certificate in Executive Coaching and Mentoring</h3>
<div class="pull-right">
</div>
</div>
<table class="table">
<tbody>
<tr class="section">
<td>Completed</td>
<td>Week</td>
<td>What to work on</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Joining Instructions</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Pre Course Reading and Preparation Work</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Classroom Days 5 & 6</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="row">
<div class="panel panel-primary filterable">
<div class="panel-heading">
<h3 class="panel-title">Assignment</h3>
<div class="pull-right">
</div>
</div>
<table class="table">
<tbody>
<tr class="section">
<td>Completed</td>
<td>Week</td>
<td>What to work on</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Submit your assignment (700)</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Conduct and Record Full 20 Hours of Coaching</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Submit your assignment (701)</td>
</tr>
<tr>
<td style="width: 4.1%; width:50px;">
<div class="checkbox radio-margin">
<label>
<input type="checkbox" value="">
<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>
</label>
</div>
</td>
<td>0</td>
<td>Submit your assignment (703)</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
.filterable {
margin-top: 15px;
}
.filterable .panel-heading .pull-right {
margin-top: -20px;
}
.filterable .filters input[disabled] {
background-color: transparent;
border: none;
cursor: auto;
box-shadow: none;
padding: 0;
height: auto;
}
.filterable .filters input[disabled]::-webkit-input-placeholder {
color: #333;
}
.filterable .filters input[disabled]::-moz-placeholder {
color: #333;
}
.filterable .filters input[disabled]:-ms-input-placeholder {
color: #333;
}
.checkbox label:after,
.radio label:after {
content: '';
display: table;
clear: both;
}
.checkbox .cr,
.radio .cr {
position: relative;
display: inline-block;
border: 1px solid #a9a9a9;
border-radius: .25em;
width: 1.3em;
height: 1.3em;
float: left;
margin-right: .5em;
}
.radio .cr {
border-radius: 50%;
}
.checkbox .cr .cr-icon,
.radio .cr .cr-icon {
position: absolute;
font-size: .8em;
line-height: 0;
top: 50%;
left: 20%;
}
.checkbox label input[type="checkbox"],
.radio label input[type="radio"] {
display: none;
}
.checkbox label input[type="checkbox"] + .cr > .cr-icon,
.radio label input[type="radio"] + .cr > .cr-icon {
transform: scale(3) rotateZ(-20deg);
opacity: 0;
transition: all .3s ease-in;
}
.checkbox label input[type="checkbox"]:checked + .cr > .cr-icon,
.radio label input[type="radio"]:checked + .cr > .cr-icon {
transform: scale(1) rotateZ(0deg);
opacity: 1;
}
.checkbox label input[type="checkbox"]:disabled + .cr,
.radio label input[type="radio"]:disabled + .cr {
opacity: .5;
}
.section {
background: #ededed;
}
/*
Please consider that the JS part isn't production ready at all, I just code it to show the concept of merging filters and titles together !
*/
$(document).ready(function(){
$('.filterable .btn-filter').click(function(){
var $panel = $(this).parents('.filterable'),
$filters = $panel.find('.filters input'),
$tbody = $panel.find('.table tbody');
if ($filters.prop('disabled') == true) {
$filters.prop('disabled', false);
$filters.first().focus();
} else {
$filters.val('').prop('disabled', true);
$tbody.find('.no-result').remove();
$tbody.find('tr').show();
}
});
$('.filterable .filters input').keyup(function(e){
/* Ignore tab key */
var code = e.keyCode || e.which;
if (code == '9') return;
/* Useful DOM data and selectors */
var $input = $(this),
inputContent = $input.val().toLowerCase(),
$panel = $input.parents('.filterable'),
column = $panel.find('.filters th').index($input.parents('th')),
$table = $panel.find('.table'),
$rows = $table.find('tbody tr');
/* Dirtiest filter function ever ;) */
var $filteredRows = $rows.filter(function(){
var value = $(this).find('td').eq(column).text().toLowerCase();
return value.indexOf(inputContent) === -1;
});
/* Clean previous no-result if exist */
$table.find('tbody .no-result').remove();
/* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
$rows.show();
$filteredRows.hide();
/* Prepend no-result row if all rows are filtered */
if ($filteredRows.length === $rows.length) {
$table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
}
});
});
