<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!--BEGIN HEAD--> <small> <div id="container" style="width:40%; margin-left:5vw"> <div id="accordion" style="width:50%;"> <!--END HEAD--> <!--BEGIN FIRST CARD--> <div class="card border-success mb-3 text-center"> <div class="card-header"> <a class="collapsed card-link text-center" data-toggle="collapse" href="#collapseFIRST"> <h5 class="card-title text-dark">First Fold</h5> <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6> </a> </div> <div id="collapseFIRST" class="collapse" data-parent="#accordion"> <div class="card-body text-left"> <table class="table table-hover group table-striped"> <tbody> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> </tbody> </table> </div> <div class="card-footer text-muted"> <a role="button" target="_BLANK" href="#" class="btn btn-sm btn-info"><font style="font-size: 8px;">Link</font></a> <a role="button" target="_BLANK" href="#" class="btn btn-sm btn-info"><font style="font-size: 8px;">Link</font></a> </div> </div> </div> <!--END FIRST CARD--> <!--BEGIN SECOND CARD--> <div class="card border-info mb-3 text-center"> <div class="card-header"> <a class="card-link" data-toggle="collapse" href="#collapseSECOND"> <h5 class="card-title text-dark">Second Fold</h5> <h6 class="card-subtitle mb-2 text-muted">Subtitle</h6> </a> </div> <div id="collapseSECOND" class="collapse show" data-parent="#accordion"> <div class="card-body"> <table class="table table-hover group table-striped"> <table class="table table-hover group table-striped"> <tbody> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> </tbody> </table> <div class="card-footer text-muted"> </div> </div> </div> </div> <!--END SECOND CARD--> <!--BEGIN THIRD (TABBED) CARD--> <div class="card border-primary mb-3"> <div class="card-header"> <a class="collapsed card-link text-dark text-center" data-toggle="collapse" href="#collapseTHIRD"> <h5 class="card-title text-dark">Third Fold</h5> <h6 class="card-subtitle mb-2 text-muted">With Tabs</h6> </div> <div id="collapseTHIRD" class="collapse" data-parent="#accordion"> <div class="card-body"> <div class="card border-primary mb-3"> <div class="card-header"> <div class="nav nav-tabs card-header-tabs" id="nav-tab" role="tablist"> <a class="nav-item nav-link active text-dark" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true" name="nav-home-tab">Main Tab</a> <a class="nav-item nav-link text-dark" id="nav-one-tab" data-toggle="tab" href="#nav-one" role="tab" aria-controls="nav-one" aria-selected="false" name="nav-one-tab">2nd Tab</a> <a class="nav-item nav-link text-dark" id="nav-two-tab" data-toggle="tab" href="#nav-two" role="tab" aria-controls="nav-two" aria-selected="false" name="nav-two-tab">3rd Tab</a> <a class="nav-item nav-link text-dark" id="nav-three-tab" data-toggle="tab" href="#nav-three" role="tab" aria-controls="nav-three" aria-selected="false" name="nav-three-tab">4th Tab</a> <a class="nav-item nav-link text-dark" id="nav-four-tab" data-toggle="tab" href="#nav-four" role="tab" aria-controls="nav-four" aria-selected="false" name="nav-four-tab">Last Tab</a> </div> </div> <div class="tab-content" id="nav-tabContent"> <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab"> <table class="table table-hover group table-striped"> <tbody> <tr> <td colspan="2"><img width="100%" src="https://cdn3.wpbeginner.com/wp-content/uploads/2016/02/pickupimage.jpg"></td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> <tr> <td>Title:</td> <td>Value</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="nav-one" role="tabpanel" aria-labelledby="nav-one-tab"> <table class="table table-hover group"> <tbody> <tr> <td>TAB TITLE 1</td> </tr> <tr> <td>Value</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="nav-two" role="tabpanel" aria-labelledby="nav-two-tab"> <table class="table table-hover group"> <tbody> <tr> <td>TAB TITLE 2 </td> </tr> <tr> <td>Value</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="nav-three" role="tabpanel" aria-labelledby="nav-three-tab"> <table class="table table-hover group"> <tbody> <tr> <td>TAB TITLE 3 </td> </tr> <tr> <td>Value</td> </tr> </tbody> </table> </div> <div class="tab-pane fade" id="nav-four" role="tabpanel" aria-labelledby="nav-four-tab"> <table class="table table-hover group"> <tbody> <tr> <td>TAB TITLE 4</td> </tr> <tr> <td>Value</td> </tr> </tbody> </table> </div> </div> </div> <div class="card-footer text-muted"></div> </div> </div> </div> <!--END THIRD (TABBED) CARD--> </div></div></small></div>