Toggle eine Bootstrap-Tabelle zum Anzeigen und Verbergen

Question

Ich habe den beigefügten Code. Ich benutze hier 2 Tische. Die letzte Zelle der ersten Tabelle hat eine Verknüpfung, die die zweite Tabelle darunter schalten soll. Wenn ich jetzt die Klasse "collapse" des Bootstrap benutze (um die zweite Tabelle auszublenden) und auf den Link in der ersten Tabelle klicke, wird das ganze Design durcheinander gebracht. Wenn ich andererseits die ausgeblendete Klasse entferne, bleibt das Design intakt. Jede Hilfe wäre willkommen.

\t \t \t <div id="market-golden-scroll" class="mCustomScrollbar" data-mcs-theme="rounded-dark">   \t 
 
        <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> \t 
 
            </div> 
 
            <div class="col-sm-7 padd-top-5"> 
 
             <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a> \t 
 
            </div> 
 
            <div class="col-sm-4 text-right padd-top-5"> 
 
             <button class="btn btn-success btn-sm"> Add Affiliate </button> \t 
 
            </div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
         
 
         <tr> 
 
         <td> 
 
          <div class="row"> 
 
            <div class="col-sm-1"> 
 
             <a href="#"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t \t \t </a> 
 
            </div> 
 
            <div class="col-sm-7 padd-top-5"> 
 
             <a class="lnk-affiliates" href="#" target="_blank">Steve Austin </a> \t 
 
            </div> 
 
            <div class="col-sm-4 text-right padd-top-5"> 
 
             <button class="btn btn-success btn-sm"> View Profile</button> \t 
 
            </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> \t 
 
            </div> 
 
            <div class="col-sm-7 padd-top-5"> 
 
             <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a> \t 
 
            </div> 
 
            <div class="col-sm-4 text-right padd-top-5"> 
 
             <button class="btn btn-success btn-sm"> Add Affiliate </button> \t 
 
            </div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
        
 
         
 
         <tr> 
 
         <td> 
 
          <div class="row"> 
 
            <div class="col-sm-1"> 
 
             <a href="#"> 
 
\t \t \t \t \t \t \t \t \t \t \t <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> 
 
\t \t \t \t \t \t \t \t \t \t </a> 
 
            </div> 
 
            <div class="col-sm-7 padd-top-5"> 
 
             <a class="lnk-affiliates" href="#" target="_blank">Andalus </a> \t 
 
            </div> 
 
            <div class="col-sm-4 text-right padd-top-5"> 
 
             <button class="btn btn-success btn-sm"> View Profile</button> \t 
 
            </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> \t 
 
            </div> 
 
            <div class="col-sm-7 padd-top-5"> 
 
             <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a> \t 
 
            </div> 
 
            <div class="col-sm-4 text-right padd-top-5"> 
 
             <button class="btn btn-success btn-sm"> Add Affiliate</button> \t 
 
            </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> \t 
 
            </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> \t 
 
            </div> 
 
            <div class="col-sm-7 padd-top-5"> 
 
             <a class="lnk-affiliates" href="#" target="_blank"> Fatima Zahra </a> \t 
 
            </div> 
 
            <div class="col-sm-4 text-right padd-top-5"> 
 
             <button class="btn btn-success btn-sm"> Add Affiliate </button> \t 
 
            </div> 
 
          </div> 
 
         </td> 
 
        </tr> 
 
        </table> 
 
        
 
        
 
     \t </div><!-- market-golden scroll -->

Answer 1

Glad das Design noch intakt

Ihr Code schwer zu lesen, aber das Konzept ist klar - möchten Sie den Link aus der 1. Tabelle hide/show der zweiten Tabelle wechseln

Verwenden jQuery - Bootstrap brauchen es trotzdem

Zuerst haben wir hide Klasse für die Anzeige benötigen - dieses in <head></head>

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

für einen Link in der 1. Tabelle - entfernen data-toggle und fügen href ..

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

Dann

die Funktion nach <html> hinzufügen

... 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> 

Ich hatte nicht den Stil für show Klasse, weil das Display c eine sein block oder inline und in diesem Fall table - so ließ ich es als Standard

Dieser ist noch nicht testen, aber ich schrieb viele wie dies in den letzten 2-3 Jahren - wird nach der Prüfung bearbeitet/aktualisiert werden :)

PS Sie müssen nicht so viel Tab benutzen, es verschwendet den linken Platz (ich benutze 2 Leerzeichen anstelle des Tabs) - sparen Sie viel!