Wie man einen Kollaps mit Bootstrap 3 oder 4 anzeigt

Question

Ich baue eine Website von Grund auf mit Bootstrap 4 und blieb bei einem Problem hängen, das für erfahrene Bootstrap-Entwickler leicht sein könnte. Ich habe eine Lösung gefunden und gefunden, wie man ein Element nach dem anderen mit Hilfe von JavaScript-Code einklappen kann, aber wie kann ich das mit Bootstrap 4 erreichen oder sollte ich bei dieser Art von Lösung bleiben? Ich werde für jeden Hinweis dankbar sein, da ich Data-toggle/data-target/versucht habe und es scheint, als würde ich etwas vermissen, um es richtig zu machen. Nicht sehr stark in der JS-Syntax, aber habe Verständnis dafür. Siehe das Beispiel here:

HTML:

<table> 
    <tr> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> 
      <a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a> 
     </div> 
     <div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: block;padding: 5px;">Div #1</div> 
     </td> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> 
      <a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a> 
     </div> 
     <div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div> 
     </td> 
     <td> 
     <div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;"> 
      <a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a> 
     </div> 
     <div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div> 
     </td> 
    </tr> 
</table> 

JS:

function showonlyone(thechosenone) { 
     var newboxes = document.getElementsByTagName("div"); 
      for(var x=0; x<newboxes.length; x++) { 
        name = newboxes[x].getAttribute("class"); 
        if (name == 'newboxes') { 
         if (newboxes[x].id == thechosenone) { 
         newboxes[x].style.display = 'block'; 
        } 
        else { 
         newboxes[x].style.display = 'none'; 
        } 
      } 
     } 
} 

Answer 1

Ich glaube, Sie es mithilfe Bootstrap Accordian lösen können. Überprüfen Sie dieses Beispiel https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example