title: Using .closest within a table to hide a row
body: <p>I am currently working on a table that expands details on a click of a row. Once a row is clicked, I want the hidden <code>&lt;tr&gt;</code> below it to show. I get that working correctly but when I try to hide it again, a white box appears below that I do not want to occur. Here is a fiddle of my example: <a href="https://jsfiddle.net/pt0skyyb/" rel="nofollow">https://jsfiddle.net/pt0skyyb/</a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;table class="table"&gt;
      &lt;tr&gt;
          &lt;th&gt;Details&lt;/th&gt;
          &lt;th&gt;First&lt;/th&gt;
          &lt;th&gt;Second&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;+&lt;/td&gt;
          &lt;td&gt;First&lt;/td&gt;
          &lt;td&gt;Second&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child"&gt;
          &lt;td colspan="3"&gt;
              &lt;table class="child-table"&gt;
                  &lt;tbody&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;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;2&lt;/td&gt;
                          &lt;td&gt;3&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
          &lt;td&gt;+&lt;/td&gt;
          &lt;td&gt;Third&lt;/td&gt;
          &lt;td&gt;Fourth&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="child"&gt;
          &lt;td colspan="3"&gt;
              &lt;table class="child-table"&gt;
                  &lt;tbody&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;/tr&gt;
                      &lt;tr&gt;
                          &lt;td&gt;1&lt;/td&gt;
                          &lt;td&gt;2&lt;/td&gt;
                          &lt;td&gt;3&lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/tbody&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>$(function() {
      $("td[colspan=3]").find("table").hide();
  
      $("table").click(function(event) {
          event.stopPropagation();
          var $target = $(event.target);
          var $child = $target.closest('tr.child');
          var $next = $target.closest("tr").next();   
          if ( $child.hasClass("shown")) {
              $child.hide().removeClass("shown");
          } else {
              $next.show().addClass("shown").slideToggle();
          }                    
      });
  });
  </code></pre>
  
  <p>If you look at the html, the <code>&lt;tr&gt;</code> with class <code>child</code> is set to <code>display:none;</code> to begin with so it is hidden. Once you click the row to make it appear and then again to disappear, it is not being completely hidden and leaves a white box. I am trying to make it disappear fully as it was before it was clicked.</p>
  
  <p>To do this, I am trying  <code>$target.closest('tr').find('.child').hide();</code> to hide it, but I can't get it to work correctly. Right now it is never going inside the if statement that checks to see if the closest <code>tr.child</code> is displayed and can't figure out why.</p>