title: Bootstrap Collapsing Table
body: <p>I am trying to make several rows collapse when I click on the parent row. currently, i am only able to collapse a single row, but i need to be able to close +2 rows at the same time. </p>
  
  <p>Below is my current code, in this code I cannot figure out how to collapse both the "HIDDEN" and "HIDDEN 2" rows when I click on the first row.</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"&gt;
  &lt;style&gt;
  .hiddenRow {
      padding: 0 !important;
  }
  &lt;/style&gt;
  
  
  &lt;div id="accordion" role="tablist" aria-multiselectable="true"&gt;
    &lt;table class="table"&gt;
      &lt;tr id="main" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;
        &lt;td&gt;
          test
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td class="hiddenRow"&gt;
          &lt;div id="collapseOne" class="collapse in" aria-labelledby="headingOne"&gt;HIDDEN&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
        &lt;td class="hiddenRow"&gt;
          &lt;div id="collapseTwo" class="collapse in" aria-labelledby="headingTwo"&gt;HIDDEN 2&lt;/div&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"&gt;&lt;/script&gt;
  </code></pre>