<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="container">
<div id="accordion" class="panel-group">
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyOne" class="accordion-toggle" data-toggle="collapse" data-parent="#accordion">Content One</a>
</h4>
</div>
<div id="panelBodyOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>Energistically drive standardized communities through user friendly results. Phosfluorescently initiate superior technologies vis-a-vis low-risk high-yield solutions. Objectively facilitate clicks-and-mortar partnerships vis-a-vis superior partnerships. Continually generate long-term high-impact methodologies via wireless leadership. Holisticly seize resource maximizing solutions via user friendly outsourcing.</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyTwo" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion">Content Two</a>
</h4>
</div>
<div id="panelBodyTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>Energistically drive standardized communities through user friendly results. Phosfluorescently initiate superior technologies vis-a-vis low-risk high-yield solutions. Objectively facilitate clicks-and-mortar partnerships vis-a-vis superior partnerships. Continually generate long-term high-impact methodologies via wireless leadership. Holisticly seize resource maximizing solutions via user friendly outsourcing.</p>
</div>
</div>
</div>
<div class="panel">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#panelBodyThree" class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion">Content Three</a>
</h4>
</div>
<div id="panelBodyThree" class="panel-collapse collapse">
<div class="panel-body">
<p>Energistically drive standardized communities through user friendly results. Phosfluorescently initiate superior technologies vis-a-vis low-risk high-yield solutions. Objectively facilitate clicks-and-mortar partnerships vis-a-vis superior partnerships. Continually generate long-term high-impact methodologies via wireless leadership. Holisticly seize resource maximizing solutions via user friendly outsourcing.</p>
</div>
</div>
</div>
</div>
</div>
.container {
width: 1180px;
margin-top: 3em;
}
#accordion .panel {
border-radius: 0;
border: 0;
margin-top: 0px;
}
#accordion a {
display: block;
padding: 10px 15px;
border-bottom: 1px solid #b42b2b;
text-decoration: none;
}
#accordion .panel-heading a.collapsed:hover,
#accordion .panel-heading a.collapsed:focus {
background-color: #b42b2b;
color: white;
transition: all 0.2s ease-in;
}
#accordion .panel-heading a.collapsed:hover::before,
#accordion .panel-heading a.collapsed:focus::before {
color: white;
}
#accordion .panel-heading {
padding: 0;
border-radius: 0px;
text-align: center;
}
#accordion .panel-heading a:not(.collapsed) {
color: white;
background-color: #b42b2b;
transition: all 0.2s ease-in;
}
/* Add Indicator fontawesome icon to the left */
#accordion .panel-heading .accordion-toggle::before {
font-family: 'FontAwesome';
content: '\f00d';
float: left;
color: white;
font-weight: lighter;
transform: rotate(0deg);
transition: all 0.2s ease-in;
}
#accordion .panel-heading .accordion-toggle.collapsed::before {
color: #444;
transform: rotate(-135deg);
transition: all 0.2s ease-in;
}