Bootstrap Snippet Show Table row on button Click using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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{
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
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();
                }
        });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Show Table row on button Click"
Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Show Table row on button Click" Bootstrap 3.3.0 Snippet by blayderunner123

Related: See More

Questions / Comments:

"Show Table row on button Click"
Bootstrap 3.3.0 Snippet by blayderunner123