title: jQuery slideToggle()/slideUp() not hiding completely (1px height remains)
body: <p>If you run the snippet below and you click on a single expand, you will see that one table's row gets expanded (well its contents do). When the expand is clicked again, the table's row will completely disappear (which is the desired output).</p>
  
  <p>The issue, however, exists with the expand all. When expand all is clicked, they all expand as anticipated. When this is clicked again, they are collapse (slideToggle'd out of sight), except they aren't really. One pixel in height remains for all the table rows except the last one. I am not sure how to fix this issue. The table cell is not being set to <code>display:none</code> properly.</p>
  
  <p>If you run the snippet you can see what I mean. The desired output would to not have the remaining pixel in height for the table-cell elements</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var animationSpeed = 600;
  $(".expand").css({
      "padding": "0em"
  });
  $(".expand").click(function () {
      expandTable($(this));
  });
  $(".expandAll").click(function () {
      $(".expand").each(function () {
          expandTable($(this));
      });
  });
  
  function expandTable($this) {
      $el = $(".slideDown[data-id='" + $this.data("id") + "']").children("td");
      if ($el.css("display") == "none") {
          $el.stop().css({
              "padding": 0
          }).show().animate({
              "padding": "0.5em"
          }, animationSpeed);
          $el.children("div").stop().slideDown({
              duration: animationSpeed
          });
          $this.find("span").html("Collapse");
          var set_baseHeight = setTimeout(function () {
              baseHeight = $("#content").height();
              //clearTimeout(set_baseHeight);
          }, animationSpeed);
      } else {
          $el.stop().animate({
              "padding": 0
          }, animationSpeed, function () {
              $el.hide();
          });
          $el.children("div").stop().slideToggle({
              duration: animationSpeed
          });
          $this.find("span").html("Expand");
          var set_baseHeight = setTimeout(function () {
              baseHeight = $("#content").height();
              $el.children("div").css({
                  "display": "none"
              });
              $el.css({
                  "display": "none"
              });
              //clearTimeout(set_baseHeight);
          }, animationSpeed);
      }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>table th, table td {
      border:1px solid black;
  }
  .expand, .expandAll {
      text-align:center;
      padding:0.5em;
      cursor:pointer;
  }
  .expand, .expandAll {
      background-color:rgba(0, 100, 0, 0.3);
  }
  .expand:hover, .expandAll:hover {
      background-color:rgba(0, 200, 0, 0.4);
  }
  .slideDown&gt;td {
      display:none;
      background-color:rgba(0, 0, 0, 0.2);
  }
  .slideDown&gt;td&gt;div {
      display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;table&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th&gt;First&lt;/th&gt;
              &lt;th&gt;Second&lt;/th&gt;
              &lt;th&gt;Third&lt;/th&gt;
              &lt;th&gt;Fourth&lt;/th&gt;
              &lt;th class="expandAll"&gt;Expand all&lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr class="slideDownHandler"&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;25&lt;/td&gt;
              &lt;td&gt;75&lt;/td&gt;
              &lt;td align="center"&gt;100&lt;/td&gt;
              &lt;td rowspan="2" class="expand" data-id="0"&gt;&lt;span&gt;Expand&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="slideDown" data-id="0"&gt;
              &lt;td colspan="4"&gt;
                  &lt;div&gt;
                      &lt;table width="100%"&gt;
                          &lt;thead&gt;
                              &lt;th&gt;Thing 1&lt;/th&gt;
                              &lt;th&gt;Stuff 1&lt;/th&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Stuff&lt;/td&gt;
                                  &lt;td align="center"&gt;Content&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="slideDownHandler"&gt;
              &lt;td&gt;0&lt;/td&gt;
              &lt;td&gt;25&lt;/td&gt;
              &lt;td&gt;75&lt;/td&gt;
              &lt;td align="center"&gt;100&lt;/td&gt;
              &lt;td rowspan="2" class="expand" data-id="1"&gt;&lt;span&gt;Expand&lt;/span&gt;
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr class="slideDown" data-id="1"&gt;
              &lt;td colspan="4"&gt;
                  &lt;div&gt;
                      &lt;table width="100%"&gt;
                          &lt;thead&gt;
                              &lt;th&gt;Thing 2&lt;/th&gt;
                              &lt;th&gt;Stuff 2&lt;/th&gt;
                          &lt;/thead&gt;
                          &lt;tbody&gt;
                              &lt;tr&gt;
                                  &lt;td&gt;Stuff&lt;/td&gt;
                                  &lt;td align="center"&gt;Content&lt;/td&gt;
                              &lt;/tr&gt;
                          &lt;/tbody&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>