title: Bootstrap accordion table smooth open and close
body: <p>I want to create a Bootstrap accordion table. When the row is clicked, it will open the sub rows. They open nicely, but the problem is it's not smooth. I've tried almost everything, but none of those worked.</p>
  
  <pre><code>&lt;table class="table table-hover"&gt;
  &lt;thead&gt;
  
  
   &lt;tr&gt;
      &lt;th&gt;
      &lt;label class="inputcheck inputcheck-lg"&gt;
      &lt;input type="checkbox" id="checkall"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/th&gt;
      &lt;th&gt;Business Name&lt;/th&gt;
      &lt;th&gt;Category&lt;/th&gt;
      &lt;th&gt;Sub Category&lt;/th&gt;
      &lt;th&gt;Free Leads&lt;/th&gt;
      &lt;th&gt;Paid Leads&lt;/th&gt;
      &lt;th&gt;Campaign&lt;/th&gt;
      &lt;th&gt;Status&lt;/th&gt;
  &lt;/tr&gt;
  &lt;/thead&gt;
  
  
  
   &lt;tbody&gt;
  
      &lt;tr data-toggle="collapse" data-target=".subrow1"&gt;
      &lt;td&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt; &lt;span class="chevron_toggleable glyphicon glyphicon-plus"&gt;&lt;/span&gt; New Vision Electric&lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="collapse subrows subrow1 uk-animation-2"&gt;
      &lt;td&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt; &lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="collapse subrows subrow1 uk-animation-3"&gt;
      &lt;td&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="collapse subrows subrow1 uk-animation-4"&gt;
      &lt;td&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr data-toggle="collapse" data-target=".subrow2"&gt;
      &lt;th scope="row"&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt; &lt;span class="chevron_toggleable glyphicon glyphicon-plus"&gt;&lt;/span&gt; New Vision Electric&lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="collapse fade subrows subrow2"&gt;
      &lt;th scope="row"&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;New Sub Row 3 &lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class="collapse fade subrows subrow2"&gt;
      &lt;th scope="row"&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;New Sub Row 3 &lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
      &lt;th scope="row"&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;New Vision Electric&lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;Not Assigned&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox"&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr class=""&gt;
      &lt;th scope="row"&gt;
      &lt;label class="inputcheck"&gt;
      &lt;input type="checkbox" class="subcheck"&gt;
      &lt;span class="icon"&gt;&lt;i class="fa fa-check"&gt;&lt;/i&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;/th&gt;
      &lt;td&gt;New Vision Electric&lt;/td&gt;
      &lt;td&gt;HVAC&lt;/td&gt;
      &lt;td&gt;Air Conditioning &lt;/td&gt;
      &lt;td&gt;05&lt;/td&gt;
      &lt;td&gt;10&lt;/td&gt;
      &lt;td&gt;HVAC Campaign 01&lt;/td&gt;
      &lt;td&gt;
      &lt;input data-handle-width="20" data-label-width="1" data-size="mini" class="form-control swich-check" type="checkbox" checked&gt;
      &lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
  
      &lt;tr&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  
  &lt;/table&gt;
  </code></pre>
  
  <p>Demo : <a href="https://jsfiddle.net/d2hfbh1p/" rel="nofollow">https://jsfiddle.net/d2hfbh1p/</a></p>