Bootstrap Accordion — стиль 24

Подробное описание и демонстрация работы аккордеона под номером №24 для библиотеки Bootstrap. Html и CSS код для реализации accordeon’a на сайте как на изображении.

<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue erat in luctus pretium. Praesent suscipit tempor consequat. Nam ac enim sit amet justo ultricies condimentum. Ut condimentum, risus at hendrerit ultricies, arcu diam lobortis metus, eu aliquam quam metus ut enim. Aliquam at mi quis tortor semper laoreet ut.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Section 2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue erat in luctus pretium. Praesent suscipit tempor consequat. Nam ac enim sit amet justo ultricies condimentum. Ut condimentum, risus at hendrerit ultricies, arcu diam lobortis metus, eu aliquam quam metus ut enim. Aliquam at mi quis tortor semper laoreet ut.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Section 3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean congue erat in luctus pretium. Praesent suscipit tempor consequat. Nam ac enim sit amet justo ultricies condimentum. Ut condimentum, risus at hendrerit ultricies, arcu diam lobortis metus, eu aliquam quam metus ut enim. Aliquam at mi quis tortor semper laoreet ut.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

a:hover, a:focus{
outline: none;
text-decoration: none;
}
#accordion .panel{
box-shadow: none;
border: none;
margin-bottom: 6px;
}
#accordion .panel-heading{
background-color:#fff;
padding:0;
}
#accordion .panel-title a{
display: block;
color:#fff;
font-size: 15px;
padding:14px 28px;
font-weight: bold;
position: relative;
border:1px solid #d3d3d3;
border-bottom:0 none;
background:#e14782;
border-top-right-radius: 15px;
}
#accordion .panel-title a.collapsed{
border-top:0;
color:#333;
background:#fff;
border-radius:0 15px;
border-top:1px solid #d3d3d3;
border-bottom:1px solid #d3d3d3;
}
#accordion .panel-title a:before,
#accordion .panel-title a.collapsed:before{
content: "f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:#fff;
position: absolute;
top:10px;
right:12px;
font-size: 14px;
line-height: 24px;
}
#accordion .panel-title a.collapsed:before{
content: "f067";
color:#333;
}
#accordion .panel-body{
color:#fff;
font-size: 14px;
line-height: 20px;
background:#e14782;
padding: 5px 27px 15px;
border:1px solid #d3d3d3;
border-top:0 none;
border-bottom-left-radius: 15px;
}