<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 ----------> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="container mt-5"> <div class="row"> <div class="col"> <div class="collapse-container"> <div class="collapse-heading"> <a class="" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> WHERE DO I FIND ALL OF THE LIVE WEBINARS? <span class="material-icons">keyboard_arrow_down</span> </a> </div> <div class="collapse show collapse-body" id="collapseExample"> <p> The live webinars are listed on our "Live Webinars" page in chronological order. <br> <br> Where do I find the Home Study Videos? If you go to our "Recorded Webinars" page, you will see a list of all of our Recorded Videos. </p> </div> </div> </div> </div> </div>

.collapse-container { padding: 1rem; border: 1px solid #eeeeee; border-radius: 10px; } .collapse-heading a { display: flex; justify-content: space-between; align-items: center; font-weight: 600; color: #222831; } .collapse-body p { padding-top: 2rem; line-height: 1.5; color: #8f8f8f; }

$(document).on("click", ".collapse-heading a", function (e) { var $this = $(this); if (!$this.hasClass("collapsed")) { $("span.material-icons").text("keyboard_arrow_down"); } else { $("span.material-icons").text("keyboard_arrow_right"); } });