title: Toggle a bootstrap table to show and hide
body: <p>I have the attached code. I'm using 2 tables here. The last cell of the first table has a link that should toggle the second table under it. Now if I use the bootstrap's "collapse" class(to hide the second table) and click on the link in the first table, the whole design gets messed up. If, on the other hand, I remove the collapsed class, the design stays intact.  Any help would be appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;div id="market-golden-scroll" class="mCustomScrollbar" data-mcs-theme="rounded-dark"&gt;         
                    &lt;table class="table table-responsive table-hover"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;div class="col-sm-1"&gt;
                                          &lt;a href="#" target="_blank"&gt;&lt;img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"&gt;&lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-7 padd-top-5"&gt;
                                          &lt;a class="lnk-affiliates" href="#" target="_blank"&gt; Fatima Zahra &lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-4 text-right padd-top-5"&gt;
                                          &lt;button class="btn btn-success btn-sm"&gt; Add Affiliate &lt;/button&gt; 
                                      &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                          
                          &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;div class="col-sm-1"&gt;
                                          &lt;a href="#"&gt;
             &lt;svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:38px;height:38px;"&gt;
                                              &lt;defs&gt;
                                              &lt;pattern id="img5" patternContentUnits="objectBoundingBox" width="100%" height="100%"&gt;
                                              &lt;image xlink:href="images/my-store.gif" preserveAspectRatio="none" width="1" height="1"&gt;
                                              &lt;/pattern&gt;
                                              &lt;/defs&gt;
                                              &lt;polygon points="50 1 92 25 92 75 50 99 8 75 8 25" fill="url(#img5)" style="stroke: #999DA3;"&gt;
                                              &lt;/svg&gt;
            &lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-7 padd-top-5"&gt;
                                          &lt;a class="lnk-affiliates" href="#" target="_blank"&gt;Steve Austin &lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-4 text-right padd-top-5"&gt;
                                          &lt;button class="btn btn-success btn-sm"&gt; View Profile&lt;/button&gt; 
                                      &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;div class="col-sm-1"&gt;
                                          &lt;a href="#" target="_blank"&gt;&lt;img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"&gt;&lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-7 padd-top-5"&gt;
                                          &lt;a class="lnk-affiliates" href="#" target="_blank"&gt; Fatima Zahra &lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-4 text-right padd-top-5"&gt;
                                          &lt;button class="btn btn-success btn-sm"&gt; Add Affiliate &lt;/button&gt; 
                                      &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                          
                          &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;div class="col-sm-1"&gt;
                                          &lt;a href="#"&gt;
             &lt;svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:38px;height:38px;"&gt;
                                              &lt;defs&gt;
                                              &lt;pattern id="img4" patternContentUnits="objectBoundingBox" width="100%" height="100%"&gt;
                                              &lt;image xlink:href="images/my-store.gif" preserveAspectRatio="none" width="1" height="1"&gt;
                                              &lt;/pattern&gt;
                                              &lt;/defs&gt;
                                              &lt;polygon points="50 1 92 25 92 75 50 99 8 75 8 25" fill="url(#img4)" style="stroke: #999DA3;"&gt;
                                              &lt;/svg&gt;
            &lt;/a&gt;
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-7 padd-top-5"&gt;
                                          &lt;a class="lnk-affiliates" href="#" target="_blank"&gt;Andalus &lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-4 text-right padd-top-5"&gt;
                                          &lt;button class="btn btn-success btn-sm"&gt; View Profile&lt;/button&gt; 
                                      &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                      
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;div class="col-sm-1"&gt;
                                          &lt;a href="#" target="_blank"&gt;&lt;img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"&gt;&lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-7 padd-top-5"&gt;
                                          &lt;a class="lnk-affiliates" href="#" target="_blank"&gt; Fatima Zahra &lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-4 text-right padd-top-5"&gt;
                                          &lt;button class="btn btn-success btn-sm"&gt; Add Affiliate&lt;/button&gt; 
                                      &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                          
                          &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;!-- load more likers --&gt;
                                      &lt;div class="col-sm-12 padd-top-5 text-right"&gt;
                                          &lt;a data-toggle="collapse" data-target="#tabLoadMoreLikers" class="lnk-affiliates" href="#"&gt;Load More &lt;/a&gt; 
                                      &lt;/div&gt;
                                      
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      
                    &lt;/table&gt;
                    
                    
                    &lt;table id="tabLoadMoreLikers" class="table table-responsive table-hover collapse"&gt;
                      &lt;tr&gt;
                          &lt;td&gt;
                              &lt;div class="row"&gt;
                                      &lt;div class="col-sm-1"&gt;
                                          &lt;a href="#" target="_blank"&gt;&lt;img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"&gt;&lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-7 padd-top-5"&gt;
                                          &lt;a class="lnk-affiliates" href="#" target="_blank"&gt; Fatima Zahra &lt;/a&gt; 
                                      &lt;/div&gt;
                                      &lt;div class="col-sm-4 text-right padd-top-5"&gt;
                                          &lt;button class="btn btn-success btn-sm"&gt; Add Affiliate &lt;/button&gt; 
                                      &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                    &lt;/table&gt;
                    
                    
           &lt;/div&gt;&lt;!-- market-golden scroll --&gt;   </code></pre>
  </div>
  </div>
  </p>