Bootstrap Accordion — стиль 6

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

<div class="container">
<div class="row">
<div class="col-md-offset-3 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="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
Section 1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse lacinia mi vel tempor suscipit. Ut in risus nunc. Nam nulla erat, lobortis in consectetur sit amet, vulputate eget tortor. Quisque viverra erat in rhoncus aliquam. Phasellus eget mollis ante. Nunc pellentesque sapien nisi, eu aliquet elit euismod et. Phasellus interdum viverra mi, at dictum turpis vestibulum vitae. Ut sit amet ullamcorper mauris. Donec sed dui quis risus placerat sagittis tristique dapibus augue.
</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. Suspendisse lacinia mi vel tempor suscipit. Ut in risus nunc. Nam nulla erat, lobortis in consectetur sit amet, vulputate eget tortor. Quisque viverra erat in rhoncus aliquam. Phasellus eget mollis ante. Nunc pellentesque sapien nisi, eu aliquet elit euismod et. Phasellus interdum viverra mi, at dictum turpis vestibulum vitae. Ut sit amet ullamcorper mauris. Donec sed dui quis risus placerat sagittis tristique dapibus augue.
</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. Suspendisse lacinia mi vel tempor suscipit. Ut in risus nunc. Nam nulla erat, lobortis in consectetur sit amet, vulputate eget tortor. Quisque viverra erat in rhoncus aliquam. Phasellus eget mollis ante. Nunc pellentesque sapien nisi, eu aliquet elit euismod et. Phasellus interdum viverra mi, at dictum turpis vestibulum vitae. Ut sit amet ullamcorper mauris. Donec sed dui quis risus placerat sagittis tristique dapibus augue.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

.panel-group .panel{
border:0px none;
border-radius: 0px;
box-shadow: none;
margin-bottom: -3px;
}
.panel-default > .panel-heading{
padding: 0;
border-radius: 0px;
}
.panel-title > a{
display: block;
padding: 15px 50px 15px 15px;
position: relative;
background: #fff;
transition:0.4s ease;
color:#e74a39;
}
.panel-title > a:hover{
text-decoration: none;
outline: none;
background: #e74a39;
color:#fff;
}
.panel-title > a:focus{
text-decoration: none;
outline: none;
}
.panel-title > a:after,
.panel-title > a.collapsed:after{
content: "f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
color:#fff;
background: #e74a39 ;
font-size: 17px;
position: absolute;
right:0px;
top:0;
padding: 14.5px;
}
.panel-title > a.collapsed:after{
content: "f067";
}
.panel-title > a.collapsed{
color:#e74a39;
}
.panel-title > a.collapsed:hover{
color:#fff;
}
.panel-body{
color:#fff;
background: #bd392a;
line-height: 24px;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body{
border-top: 0px none;
}