Bootstrap Accordion

HTML

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

						
										<div class="panel-group" id="accordion">

											<div class="panel panel-default">
												<div class="panel-heading">
													<h4 class="panel-title">
														<a data-toggle="collapse" data-parent="#accordion" href="#collapse1" class="collapsed">Water Quality</a>
													</h4>
												</div>
												<div id="collapse1" class="panel-collapse collapse">
													<div class="panel-body">
														Mini-Moorings can be outfitted with third-party sensors to measure optical backscatter, chlorophyll fluorescence, and dissolved oxygen.
													</div>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<h4 class="panel-title">
														<a data-toggle="collapse" data-parent="#accordion" href="#collapse2" class="collapsed">Coral Reef Health</a>
													</h4>
												</div>
												<div id="collapse2" class="panel-collapse collapse">
													<div class="panel-body">
														Underwater cameras can be deployed on the drogue and programmed to capture still images at pre-defined intervals. Over time, these images, along with ancillary ocean measurements (T, S) can be used to diagnose changes in coral reef health.
													</div>
												</div>
											</div>

											<div class="panel panel-default">
												<div class="panel-heading">
													<h4 class="panel-title">
														<a data-toggle="collapse" data-parent="#accordion" href="#collapse3" class="collapsed">Ocean Acidification</a>
													</h4>
												</div>
												<div id="collapse3" class="panel-collapse collapse">
													<div...

CSS

#aboutOverview {
  padding: 20px;
}
#aboutOverview h2 {
  margin-top: 10px;
}
#aboutOverview #accordion {
  padding: 30px 20px;
}

 .panel-heading [data-toggle="collapse"]:after {
        font-family: 'Glyphicons Halflings';
        content: "\e072"; /* "play" icon */
        float: right;
        color: #F58723;
        font-size: 18px;
        line-height: 22px;
      
    }

    .panel-heading [data-toggle="collapse"].collapsed:after {
        /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
        color: #454444;
    }