<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 ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org">
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>
Dynamicly Hide SharePoint 2013 Form Fields with no content
</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha256-916EbMg70RQy9LHiGkXzG8hSg9EdNy97GazNG/aiY1w=" crossorigin=
"anonymous" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin=
"anonymous" type="text/javascript">
</script>
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css"
type="text/css">
</head>
<body>
<div class="container">
<div class="row">
<button class="btn btn-success btn-block" id="toggleButton" type="button" value=
"Show me the money!" onclick="counter++; toggleFields('unit');">Show Form
Fields</button>
</div>
<div class="row">
<table class="table" colspan="12">
<thead>
<tr>
<th class="colspan1">
#
</th>
<th class="colspan7">
Unit Name
</th>
<th class="colspan2">
Unit Suspense
</th>
<th class="colspan2">
Unit Status
</th>
</tr>
</thead>
<tbody>
<tr class="table">
<th scope="row" class="colspan1">
1
</th>
<td class="colspan7">
<select class="form-control">
<option value="form-control">
Unit 1
</option>
<option value="form-control">
Unit 2
</option>
<option value="form-control">
Unit 3
</option>
<option value="form-control">
Unit 4
</option>
<option value="form-control">
Unit 5
</option>
<option value="form-control">
Unit 6
</option>
</select>
</td>
<td class="colspan2">
<div class="input-group date" data-provide="datepicker">
<input class="form-control" type="text">
<div class="input-group-addon"></div>
</div>
</td>
<td class="colspan2">
<select class="form-control">
<option class="form-control bg-warning" value=
"form-control bg-warning">
In Progress
</option>
<option class="form-control bg-success" value=
"form-control bg-success">
Suspense Met
</option>
<option class="form-control bg-danger" value="form-control bg-danger">
Suspense Not Met
</option>
</select>
</td>
</tr>
<tr id="unit1" class="table" style="display:none;">
<th scope="row" class="colspan1">
2
</th>
<td class="colspan7">
<select class="form-control">
<option value="form-control">
Unit 1
</option>
<option value="form-control">
Unit 2
</option>
<option value="form-control">
Unit 3
</option>
<option value="form-control">
Unit 4
</option>
<option value="form-control">
Unit 5
</option>
<option value="form-control">
Unit 6
</option>
</select>
</td>
<td class="colspan2">
<div class="input-group date" data-provide="datepicker">
<input class="form-control" type="text">
<div class="input-group-addon"></div>
</div>
</td>
<td class="colspan2">
<select class="form-control">
<option class="form-control bg-warning" value=
"form-control bg-warning">
In Progress
</option>
<option class="form-control bg-success" value=
"form-control bg-success">
Suspense Met
</option>
<option class="form-control bg-danger" value="form-control bg-danger">
Suspense Not Met
</option>
</select>
</td>
</tr>
<tr id="unit2" class="table" style="display:none;">
<th scope="row" class="colspan1">
3
</th>
<td class="colspan7">
<select class="form-control">
<option value="form-control">
Unit 1
</option>
<option value="form-control">
Unit 2
</option>
<option value="form-control">
Unit 3
</option>
<option value="form-control">
Unit 4
</option>
<option value="form-control">
Unit 5
</option>
<option value="form-control">
Unit 6
</option>
</select>
</td>
<td class="colspan2">
<div class="input-group date" data-provide="datepicker">
<input class="form-control" type="text">
<div class="input-group-addon"></div>
</div>
</td>
<td class="colspan2">
<select class="form-control">
<option class="form-control bg-warning" value=
"form-control bg-warning">
In Progress
</option>
<option class="form-control bg-success" value=
"form-control bg-success">
Suspense Met
</option>
<option class="form-control bg-danger" value="form-control bg-danger">
Suspense Not Met
</option>
</select>
</td>
</tr>
<tr id="unit3" class="table" style="display:none;">
<th scope="row" class="colspan1">
4
</th>
<td class="colspan7">
<select class="form-control">
<option value="form-control">
Unit 1
</option>
<option value="form-control">
Unit 2
</option>
<option value="form-control">
Unit 3
</option>
<option value="form-control">
Unit 4
</option>
<option value="form-control">
Unit 5
</option>
<option value="form-control">
Unit 6
</option>
</select>
</td>
<td class="colspan2">
<div class="input-group date" data-provide="datepicker">
<input class="form-control" type="text">
<div class="input-group-addon"></div>
</div>
</td>
<td class="colspan2">
<select class="form-control">
<option class="form-control bg-warning" value=
"form-control bg-warning">
In Progress
</option>
<option class="form-control bg-success" value=
"form-control bg-success">
Suspense Met
</option>
<option class="form-control bg-danger" value="form-control bg-danger">
Suspense Not Met
</option>
</select>
</td>
</tr>
<tr id="unit4" class="table" style="display:none;">
<th scope="row" class="colspan1">
5
</th>
<td class="colspan7">
<select class="form-control">
<option value="form-control">
Unit 1
</option>
<option value="form-control">
Unit 2
</option>
<option value="form-control">
Unit 3
</option>
<option value="form-control">
Unit 4
</option>
<option value="form-control">
Unit 5
</option>
<option value="form-control">
Unit 6
</option>
</select>
</td>
<td class="colspan2">
<div class="input-group date" data-provide="datepicker">
<input class="form-control" type="text">
<div class="input-group-addon"></div>
</div>
</td>
<td class="colspan2">
<select class="form-control">
<option class="form-control bg-warning" value=
"form-control bg-warning">
In Progress
</option>
<option class="form-control bg-success" value=
"form-control bg-success">
Suspense Met
</option>
<option class="form-control bg-danger" value="form-control bg-danger">
Suspense Not Met
</option>
</select>
</td>
</tr>
<tr id="unit5" class="table" style="display:none;">
<th scope="row" class="colspan1">
6
</th>
<td class="colspan7">
<select class="form-control">
<option value="form-control">
Unit 1
</option>
<option value="form-control">
Unit 2
</option>
<option value="form-control">
Unit 3
</option>
<option value="form-control">
Unit 4
</option>
<option value="form-control">
Unit 5
</option>
<option value="form-control">
Unit 6
</option>
</select>
</td>
<td class="colspan2">
<div class="input-group date" data-provide="datepicker">
<input class="form-control" type="text">
<div class="input-group-addon"></div>
</div>
</td>
<td class="colspan2">
<select class="form-control">
<option class="form-control bg-warning" value=
"form-control bg-warning">
In Progress
</option>
<option class="form-control bg-success" value=
"form-control bg-success">
Suspense Met
</option>
<option class="form-control bg-danger" value="form-control bg-danger">
Suspense Not Met
</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</div><script src=
"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha256-U5ZEeKfGNOja007MMD3YBI0A3OSZOQbeG6z2f2Y0hu8=" crossorigin=
"anonymous" type="text/javascript"></script>
</body>
</html>
body{
background: #f1f1f1;
}
table,
.table,
.container,
.container-fluid,
.row{
background:#ffff;
}
.btn{
border-radius:0px;
font-weight:600;
}
select, option {
background:inherit;
}
select.bg-warning, option[value="bg-warning"] {
background: #fcf8e3;
}
select.bg-danger, option[value="bg-danger"] {
background: #f2dede;
}
select.bg-success, option[value="bg-success"] {
background: #dff0d8;
}
td[colspan="1"],.colspan1{
min-width:8.3333%;
width:auto;
max-width:8.3333%;
}
td[colspan="2"],.colspan2{
min-width:16.6666%;
width:auto;
max-width:16.6666%;
}
td[colspan="3"],.colspan3{
min-width:24.9999%;
width:auto;
max-width:24.9999%;
}
td[colspan="4"],.colspan4{
min-width:33.3333%;
width:auto;
max-width:33.3333%;
}
td[colspan="5"],.colspan5{
min-width:41.6666%;
width:auto;
max-width:41.6666%;
}
td[colspan="6"],.colspan6{
min-width:50%;
width:auto;
max-width:50%;
}
td[colspan="7"],.colspan7{
min-width:58.3333%;
width:auto;
max-width:58.3333%;
}
td[colspan="8"],.colspan8{
min-width:66.6666%;
width:auto;
max-width:66.6666%;
}
td[colspan="9"],.colspan9{
min-width:74.9999%;
width:auto;
max-width:74.9999%;
}
td[colspan="10"],.colspan10{
min-width:83.3333%;
width:auto;
max-width:83.3333%;
}
td[colspan="11"],.colspan11{
min-width:91.6666%;
width:auto;
max-width:91.6666%;
}
td[colspan="12"],.colspan12{
min-width:100%;
width:auto;
max-width:100%;
}
var counter = 0;
var numBoxes = 5;
function toggleFields(showHideDiv)
{
var ele = document.getElementById(showHideDiv + counter);
if(ele.style.display == "table-row") {
ele.style.display = "none";
}
else {
ele.style.display = "table-row";
}
if(counter == numBoxes) {
document.getElementById("toggleButton").style.display = "none";
}
}
$(document).ready(function() {
var $select = $('select');
$select.each(function() {
$(this).addClass($(this).children(':selected').val());
}).on('change', function(ev) {
$(this).attr('class', '').addClass($(this).children(':selected').val());
});
});
//Code to hide blank fields
$(function()
{
$.each($('td.ms-formbody'), function()
{
if (!$(this).text().replace(/\xA0/,' ').trim())
{
$(this).closest('tr').hide();
}
});
});
