Toggle a bootstrap table to show and hide

Question

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.

			<div id="market-golden-scroll" class="mCustomScrollbar" data-mcs-theme="rounded-dark">        	
                  <table class="table table-responsive table-hover">
                    <tr>
                        <td>
                            <div class="row">
                                    <div class="col-sm-1">
                                        <a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>	
                                    </div>
                                    <div class="col-sm-7 padd-top-5">
                                        <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>	
                                    </div>
                                    <div class="col-sm-4 text-right padd-top-5">
                                        <button class="btn btn-success btn-sm"> Add Affiliate </button>	
                                    </div>
                            </div>
                        </td>
                    </tr>
                        
                        <tr>
                        <td>
                            <div class="row">
                                    <div class="col-sm-1">
                                        <a href="#">
											<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:38px;height:38px;">
                                            <defs>
                                            <pattern id="img5" patternContentUnits="objectBoundingBox" width="100%" height="100%">
                                            <image xlink:href="images/my-store.gif" preserveAspectRatio="none" width="1" height="1">
                                            </pattern>
                                            </defs>
                                            <polygon points="50 1 92 25 92 75 50 99 8 75 8 25" fill="url(#img5)" style="stroke: #999DA3;">
                                            </svg>
										</a>
                                    </div>
                                    <div class="col-sm-7 padd-top-5">
                                        <a class="lnk-affiliates" href="#" target="_blank">Steve Austin </a>	
                                    </div>
                                    <div class="col-sm-4 text-right padd-top-5">
                                        <button class="btn btn-success btn-sm"> View Profile</button>	
                                    </div>
                            </div>
                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <div class="row">
                                    <div class="col-sm-1">
                                        <a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>	
                                    </div>
                                    <div class="col-sm-7 padd-top-5">
                                        <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>	
                                    </div>
                                    <div class="col-sm-4 text-right padd-top-5">
                                        <button class="btn btn-success btn-sm"> Add Affiliate </button>	
                                    </div>
                            </div>
                        </td>
                    </tr>
                    
                        
                        <tr>
                        <td>
                            <div class="row">
                                    <div class="col-sm-1">
                                        <a href="#">
											<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" style="width:38px;height:38px;">
                                            <defs>
                                            <pattern id="img4" patternContentUnits="objectBoundingBox" width="100%" height="100%">
                                            <image xlink:href="images/my-store.gif" preserveAspectRatio="none" width="1" height="1">
                                            </pattern>
                                            </defs>
                                            <polygon points="50 1 92 25 92 75 50 99 8 75 8 25" fill="url(#img4)" style="stroke: #999DA3;">
                                            </svg>
										</a>
                                    </div>
                                    <div class="col-sm-7 padd-top-5">
                                        <a class="lnk-affiliates" href="#" target="_blank">Andalus </a>	
                                    </div>
                                    <div class="col-sm-4 text-right padd-top-5">
                                        <button class="btn btn-success btn-sm"> View Profile</button>	
                                    </div>
                            </div>
                        </td>
                    </tr>
                    
                    
                    <tr>
                        <td>
                            <div class="row">
                                    <div class="col-sm-1">
                                        <a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>	
                                    </div>
                                    <div class="col-sm-7 padd-top-5">
                                        <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>	
                                    </div>
                                    <div class="col-sm-4 text-right padd-top-5">
                                        <button class="btn btn-success btn-sm"> Add Affiliate</button>	
                                    </div>
                            </div>
                        </td>
                    </tr>
                    
                        
                        <tr>
                        <td>
                            <div class="row">
                                    <!-- load more likers -->
                                    <div class="col-sm-12 padd-top-5 text-right">
                                        <a data-toggle="collapse" data-target="#tabLoadMoreLikers" class="lnk-affiliates" href="#">Load More </a>	
                                    </div>
                                    
                            </div>
                        </td>
                    </tr>
                    
                  </table>
                  
                  
                  <table id="tabLoadMoreLikers" class="table table-responsive table-hover collapse">
                    <tr>
                        <td>
                            <div class="row">
                                    <div class="col-sm-1">
                                        <a href="#" target="_blank"><img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png"></a>	
                                    </div>
                                    <div class="col-sm-7 padd-top-5">
                                        <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a>	
                                    </div>
                                    <div class="col-sm-4 text-right padd-top-5">
                                        <button class="btn btn-success btn-sm"> Add Affiliate </button>	
                                    </div>
                            </div>
                        </td>
                    </tr>
                  </table>
                  
                  
        	</div><!-- market-golden scroll -->   

Answer 1

Glad the design still intact

Your code are hard to read but the concept is clear - you want the link from 1st table to toggle hide/show of the 2nd table

Use jQuery - Bootstrap need it anyway

First we need hide class for display - put this in <head></head>

<style>.hide { display: none; }</style>

for a link in 1st table - remove data-toggle and add href..

<a href="javascript:toggleDisplay('tabLoadMoreLikers');"> Link </a>

Then add the function after <html>

... code before ...
</html>
<script>
function toggleDisplay(id) {
  if( $('#'+id).hasClass('show') ) {
    $('#'+id).removeClass('show');
    $('#'+id).addClass('hide');
  } else {
    $('#'+id).removeClass('hide');
    $('#'+id).addClass('show');
  }
}
</script>

I didn't have the style for show class because the display can be block or inline and in this case table - so I left it as default

This one is not test yet but I wrote many like this for the past 2-3 years - will be edited/updated after testing :)

P.S. You don't have to use tab this much, it wasting the left-side space (I'm using 2 spaces in place of tab) - save a lot!