title: Table with hide - show button when result is 0
body: <p>I have this Table, the code is easy to understand. The user will be asked by the code to give 4 int variables about 2019 and 2018 income - expenses.</p>
  
  <p><code>var a = parseFloat(prompt("Give the 2019 Income","0"));
   var b = parseFloat(prompt("Give the 2018 Income","0"));
   var c = parseFloat(prompt("Give the Expenses of 2019","0"));
   var d = parseFloat(prompt("Give the Expenses of 2018","0"));</code></p>
  
  <p>What i want to do is: When the user has filled the 2018 and 2019 income and both are 0 
  the button will hide the zeros and the <code>&lt;th&gt; &lt;b&gt;&lt;p &gt;Income:&lt;/p&gt;&lt;/b&gt; &lt;/th&gt;</code>
  The same thing i want to do with the Expenses.
  But when you fill the fields with 0.. you press the button to hide them and nothing happens </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var a = parseFloat(prompt("Give the 2019 Income", "0"));
  var b = parseFloat(prompt("Give the 2018 Income", "0"));
  
  var c = parseFloat(prompt("Give the Expenses of 2019", "0"));
  var d = parseFloat(prompt("Give the Expenses of 2018", "0"));
  
  $(document).ready(
    function() {
      $("button").click(
        function() {
  
          if (a == 0 &amp;&amp; b == 0)
            $("#h1").toggle();
          else(c == 0 &amp;&amp; d == 0)
          $("#h2").toggle();
  
        });
      document.getElementById("p2").innerHTML = a;
      document.getElementById("p3").innerHTML = b;
  
      document.getElementById("p4").innerHTML = c;
      document.getElementById("p5").innerHTML = d;
    });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#foo {
    position: absolute;
    z-index: 99;
    left: 250px;
    top: 60px;
  }
  
  th {
    padding: 10px;
    border-bottom: 1px solid #ddd;
  }
  
  tr {
    background: white;
    border-bottom: 1px solid #ddd;
  }
  
  td {
    font-size: smaller;
    padding: 15px;
    border-bottom: 1px solid #ddd;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;
  &lt;/script&gt;
  
  &lt;button&gt;Hide when results are 0&lt;/button&gt;
  
  &lt;table id="foo"&gt;
    &lt;tbody&gt;
  
      &lt;tr id="foo1"&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt; &lt;b&gt;2019&lt;/b&gt; &lt;/td&gt;
        &lt;td&gt; &lt;b&gt;2018&lt;/b&gt; &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;div id="h1"&gt;
        &lt;tr id="foo2"&gt;
          &lt;th&gt; &lt;b&gt;
                            &lt;p&gt;Income:&lt;/p&gt;
                          &lt;/b&gt; &lt;/th&gt;
  
          &lt;td&gt; &lt;b&gt;
                              &lt;p id="p2"&gt;&lt;/p&gt;
                          &lt;/b&gt; &lt;/td&gt;
          &lt;td&gt; &lt;b&gt;
                              &lt;p id="p3"&gt;&lt;/p&gt;
                          &lt;/b&gt; &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/div&gt;
  
      &lt;div id="h2"&gt;
        &lt;tr id="foo3"&gt;
          &lt;th&gt; &lt;b&gt;
                              &lt;p&gt;Expenses:&lt;/p&gt;
                          &lt;/b&gt; &lt;/th&gt;
          &lt;td&gt; &lt;b&gt;
                              &lt;p id="p4"&gt;&lt;/p&gt;
                          &lt;/b&gt; &lt;/td&gt;
          &lt;td&gt; &lt;b&gt;
                              &lt;p id="p5"&gt;&lt;/p&gt;
                          &lt;/b&gt; &lt;/td&gt;
        &lt;/tr&gt;
      &lt;/div&gt;
  
      &lt;tr id="foo4"&gt;
        &lt;th&gt; Monthly expenses :&lt;/th&gt;
        &lt;td&gt; &lt;b&gt;2.500&lt;/b&gt; &lt;/td&gt;
        &lt;td&gt; &lt;/td&gt;
      &lt;/tr&gt;
  
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>