<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css" rel="stylesheet"> <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/css/mdb.min.css" rel="stylesheet"> <div class="row"> <div class="col"> <div id="accordion" role="tablist" aria-multiselectable="true"> <div class="card"> <div class="card-header" role="tab" id="headingOne"> <h5 class="mb-0"> <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Patients <small>(3 résultats)</small> </a> </h5> </div> <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> <div class="card-block"> <div class="table-responsive"> <table class="table table-sm"> <thead class="thead-default"> <tr> <th>Nom</th> <th>Prénom</th> <th>DDN</th> <th><i class="fa fa-plus"></i></th> </tr> </thead> <tbody> <tr> <td>Mark</td> <td>Otto</td> <td>22/07/1956</td> <td> <a class="kebab-link" data-toggle="dropdown" data-target="#dropdown1"><i class="fa fa-ellipsis-v"></i></a> <div class="dropdown kebab-dropdown dropdown-sm" id="dropdown1"> <div class="dropdown-menu dropdown-menu-right"> <a class="dropdown-item" href="#">Action</a> <a class="dropdown-item" href="#">Another action</a> <a class="dropdown-item" href="#">Something else here</a> <div class="dropdown-divider"></div> <a class="dropdown-item" href="#">Separated link</a> </div> </div> </td> </tr> <tr> <td>Jacob</td> <td>Thornton</td> <td>03/05/1978</td> <td><i class="fa fa-ellipsis-v"></td> </tr> <tr> <td>Larry</td> <td>the Bird</td> <td>18/12/1987</td> <td><i class="fa fa-ellipsis-v"></i></td> </tr> </tbody> </table> </div> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingTwo"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Consultations </a> </h5> </div> <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="card-block"> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="headingThree"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> Traitements </a> </h5> </div> <div id="collapseThree" class="collapse" role="tabpanel"> <div class="card-block"> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="heading4"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse4" > Recommandations </a> </h5> </div> <div id="collapse4" class="collapse" role="tabpanel"> <div class="card-block"> </div> </div> </div> <div class="card"> <div class="card-header" role="tab" id="heading5"> <h5 class="mb-0"> <a class="collapsed" data-toggle="collapse" href="#collapse5"> Professionnels </a> </h5> </div> <div id="collapse5" class="collapse" role="tabpanel"> <div class="card-block"> </div> </div> </div> </div> </div> </div> <!--row-->

/*** Bootstrap dropdown container fix for Bootstrap 4 and Material Design Bootstrap Hint : Move out the button or the link declaring the data-toggle="dropdwn" from the .dropdown div ***/ .kebab-link i{ font-size: 1.5rem; } .kebab-link i:active, .kebab-link i:hover { color: #4285F4; } .kebab-dropdown { position: absolute; } /* Material design for dropdowns */ .dropdown-sm>.dropdown-menu>.dropdown-item { padding: 5px; margin-left: 0; } .dropdown-menu>.dropdown-item { padding: 1rem; margin-left: 0; } .dropdown-menu>.dropdown-item:hover { box-shadow: 0 8px 17px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19); color: white; background: #4285F4; }

loadjscssfile("https://code.jquery.com/jquery-3.2.1.min.js"); loadjscssfile("https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"); loadjscssfile("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"); loadjscssfile("https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.2/js/mdb.min.js");