<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 ----------> <section id="leadership"> <div class="container"> <div class="row"> <div class="col-12 col-md-6 offset-lg-2 col-lg-4"> <div class="accordion" id="accordionLeaders"> <div class="card"> <div class="accordion-group"> <div class="card-header"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeaders" href="#leader1"> <div class="media"> <img src="http://bit.ly/2IirA9e" class="mr-3 rounded-circle" alt="..."> <div class="media-body"> <h5 class="mt-2">John Doe</h5> <p>CEO & Co-Founder</p> </div> </div> </a> </div> <div id="leader1" class="accordion-body in collapse" style="height: auto; "> <div class="card-body"> brief </div> </div> </div> </div> <div class="card"> <div class="accordion-group"> <div class="card-header"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeaders" href="#leader2"> <div class="media"> <img src="http://bit.ly/2IirA9e" class="mr-3 rounded-circle" alt="..."> <div class="media-body"> <h5 class="mt-2">John Getta</h5> <p>Product Development & Co-Founder</p> </div> </div> </a> </div> <div id="leader2" class="accordion-body collapse" style="height: 0px; "> <div class="card-body"> Brief </div> </div> </div> </div> <div class="card"> <div class="accordion-group"> <div class="card-header"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeaders" href="#leader3"> <div class="media"> <img src="http://bit.ly/2IirA9e" class="mr-3 rounded-circle" alt="..."> <div class="media-body"> <h5 class="mt-2">John Doe</h5> <p>Chief Marketing Officer</p> </div> </div> </a> </div> <div id="leader3" class="accordion-body collapse" style="height: 0px; "> <div class="card-body"> Brief </div> </div> </div> </div> </div> </div> <div class="col-12 col-md-6 col-lg-4"> <div class="accordion" id="accordionLeaders2"> <div class="card"> <div class="accordion-group"> <div class="card-header"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeaders2" href="#leader4"> <div class="media"> <img src="http://bit.ly/2IirA9e" class="mr-3 rounded-circle" alt="..."> <div class="media-body"> <h5 class="mt-2">Jane Doe</h5> <p>Chief Customer Officer</p> </div> </div> </a> </div> <div id="leader4" class="accordion-body in collapse" style="height: auto; "> <div class="card-body"> Brief </div> </div> </div> </div> <div class="card"> <div class="accordion-group"> <div class="card-header"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeaders2" href="#leader5"> <div class="media"> <img src="http://bit.ly/2IirA9e" class="mr-3 rounded-circle" alt="..."> <div class="media-body"> <h5 class="mt-2"> Jane Doe</h5> <p>Chief Special Project Officer</p> </div> </div> </a> </div> <div id="leader5" class="accordion-body collapse" style="height: 0px; "> <div class="card-body"> Brief </div> </div> </div> </div> <div class="card"> <div class="accordion-group"> <div class="card-header"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionLeaders2" href="#leader6"> <div class="media"> <img src="http://bit.ly/2IirA9e" class="mr-3 rounded-circle" alt="..." style="width: 64px; height: 64px;"> <div class="media-body"> <h5 class="mt-2">Michael Keen</h5> <p>CEO & Co-Founder</p> </div> </div> </a> </div> <div id="leader6" class="accordion-body collapse" style="height: 0px; "> <div class="card-body"> Brief </div> </div> </div> </div> </div> </div> </div> </div> </section>

#leadership { background-color: #fffbfc; padding: 100px 0; } #leadership .accordion .card { border: none; } #leadership .accordion .card img { height: 64px; width: 64px; } #leadership .accordion .card .accordion-group .card-header { background-color: #fffbfc; padding: 10px; border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px); } #leadership .accordion .card .accordion-group .card-header:hover { background-color: #edb348; } #leadership .accordion .card .accordion-group .card-header a { text-decoration: none; color: #000; } #leadership .accordion .card .accordion-group .card-header a:hover { color: white; }