<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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">
<div class="row">
<h1>Pre-school Snack Menu</h1>
<div class="col-md-8 col-md-offset-2">
<div class="pull-right">
<div class="">
<button type="button" class="btn btn-primary outline btn-filter btn-all" data-target="all">All Weeks</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk1" data-target="1">Week 1</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk2" data-target="2">Week 2</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk3" data-target="3">Week 3</button>
<button type="button" class="btn btn-primary outline btn-filter btn-wk4" data-target="4">Week 4</button>
</div>
</div>
<div class="col-xs-12" style="height:30px;"></div>
<div class="table-container">
<table class="table tt_timetable">
<thead>
<tr class="row_gray" style="background-color: #f0f0f0 !important; display: true;">
<th style="background: #fff !important;"></th>
<th>Monday</th>
<th>Tuesday</th>
<th>Wednesday</th>
<th>Thursday</th>
<th>Friday</th>
</tr>
</thead>
<tbody>
<tr class="week1" data-status="1">
<td class="wk_header">
<div>
Week 1
</div>
</td>
<td>
<div class="">
Crumpets
</div>
</td>
<td>
<div class="">
Cheese Straws
</div>
</td>
<td>
<div class="">
Crackers & Cheese
</div>
</td>
<td>
<div class="">
Fruit Bagel
</div>
</td>
<td>
<div class="">
Rice Cake – Various
</div>
</td>
</tr>
<tr class="week2" data-status="2">
<td class="wk_header">
<div>
Week 2
</div>
</td>
<td>
<div class="">
Fruit Bread
</div>
</td>
<td>
<div class="">
Potato Cakes
</div>
</td>
<td>
<div class="">
Corn Snacks
</div>
</td>
<td>
<div class="">
Yoghurt
</div>
</td>
<td>
<div class="">
Muffin
</div>
</td>
</tr>
<tr class="week3" data-status="3">
<td class="wk_header">
<div>
Week 3
</div>
</td>
<td>
<div class="">
Oatcakes
</div>
</td>
<td>
<div class="">
Malt Loaf
</div>
</td>
<td>
<div class="">
Vegetable Puffs
</div>
</td>
<td>
<div class="">
Organic Crisps
</div>
</td>
<td>
<div class="">
Cheese Scone
</div>
</td>
</tr>
<tr class="week4" data-status="4">
<td class="wk_header">
<div>
Week 4
</div>
</td>
<td>
<div class="">
Popcorn
</div>
</td>
<td>
<div class="">
Pitta Pocket Strips & Humus
</div>
</td>
<td>
<div class="">
Yoghurt
</div>
</td>
<td>
<div class="">
Crackers & Cheese
</div>
</td>
<td>
<div class="">
Toasted bagel
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
.tt_tabs .tt_timetable {
font-family: "Open Sans" !important;
}
table.tt_timetable {
margin-bottom: 0px;
}
table.tt_timetable {
width: 100%;
font-size: 11px;
color: #666;
margin-top: 30px;
border: 0;
font-family: arial;
letter-spacing: normal;
font-size: 11px;
line-height: normal;
font-family: 'Lato', Helvetica, Arial, sans-serif;
border-collapse: separate !important;
border-spacing: 2px !important;
background: #FFF !important;
}
.table>thead>tr>th {
vertical-align: bottom;
border: none;
}
.tt_timetable th {
width: 12.5%;
padding: 10px 15px 12px;
letter-spacing: normal;
text-align: center;
vertical-align: middle;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: normal;
color: #34495E;
text-transform: none;
border: none !important;
}
.tt_timetable td {
text-align: center;
color: #fff;
font-size: 14px;
border-top: 1px solid #fff !important;
vertical-align: middle !important;
}
.tt_timetable .week1 td {
background: #f25141;
height: 100px;
}
.tt_timetable .week2 td {
background: #ffd823;
height: 100px;
}
.tt_timetable .week3 td {
background: #93c524;
height: 100px;
}
.tt_timetable .week4 td {
background: #28a8e3;
height: 100px;
}
.btn {
padding: 5px 10px;
border: 0 none;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.btn:focus, .btn:active:focus, .btn.active:focus {
outline: 0 none;
}
.btn-primary {
background: #0099cc;
color: #ffffff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
background: #33a6cc;
}
.btn-primary:active, .btn-primary.active {
background: #007299;
box-shadow: none;
}
.btn.outline {
background: none;
padding: 6px 12px;
}
.btn-primary.outline {
border: 2px solid #bbb;
color: #bbb;
}
.btn-primary.outline:hover, .btn-primary.outline:focus, .btn-primary.outline:active, .btn-primary.outline.active, .open > .dropdown-toggle.btn-primary {
color: #eee;
border-color: #eee;
}
.btn-primary.outline:active, .btn-primary.outline.active {
border-color: #007299;
color: #007299;
box-shadow: none;
}
.btn-primary.outline.btn-wk1 {
border: 2px solid #f25141;
color: #f25141;
}
.btn-primary.outline.btn-wk1:hover, .btn-primary.outline.btn-wk1:focus, .btn-primary.outline.btn-wk1:active {
color: #d9483a;
border-color: #d9483a;
}
.btn-primary.outline.btn-wk2 {
border: 2px solid #ffd823;
color: #ffd823;
}
.btn-primary.outline.btn-wk2:hover, .btn-primary.outline.btn-wk2:focus, .btn-primary.outline.btn-wk2:active {
color: #e5c21f;
border-color: #e5c21f;
}
.btn-primary.outline.btn-wk3 {
border: 2px solid #93c524;
color: #93c524;
}
.btn-primary.outline.btn-wk3:hover, .btn-primary.outline.btn-wk3:focus, .btn-primary.outline.btn-wk3:active {
color: #84b120;
border-color: #84b120;
}
.btn-primary.outline.btn-wk4 {
border: 2px solid #28a8e3;
color: #28a8e3;
}
.btn-primary.outline.btn-wk4:hover, .btn-primary.outline.btn-wk4:focus {
color: #2086B5;
border-color: #2086B5;
}
.btn-primary.outline.btn-wk4:active {
color: #79b6d2;
border-color: #79b6d2;
}
.wk_header {
background-color: #f0f0f0 !important;
display: true;
width: 12.5%;
padding: 10px 15px 12px;
letter-spacing: normal;
text-align: center;
vertical-align: middle !important;
font-size: 14px;
font-weight: bold;
font-style: normal;
line-height: normal;
color: #34495E !important;
text-transform: none;
border: none !important;
}
$(document).ready(function () {
$('.star').on('click', function () {
$(this).toggleClass('star-checked');
});
$('.ckbox label').on('click', function () {
$(this).parents('tr').toggleClass('selected');
});
$('.btn-filter').on('click', function () {
var $target = $(this).data('target');
if ($target != 'all') {
$('.table tbody tr').css('display', 'none');
$('.table tbody tr[data-status="' + $target + '"]').fadeIn('slow');
} else {
$('.table tbody tr').css('display', 'none').fadeIn('slow');
}
});
});
