Toggle a bootstrap table to show and hide - html

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">
<img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png">
</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">
<img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png">
</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">
<img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png">
</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">
<img alt="" class="img-profile-pic img-circle" src="images/profile-pic.fw.png">
</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..
Link
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!