Bootstrap Accordion — стиль 12

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

<div class="container">
<div class="row">
<div class="col-sm-8">
<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 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">
1 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mattis augue, a dignissim ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a interdum eros, vel sollicitudin erat. Vestibulum iaculis risus magna. Nunc.
</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">
2 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mattis augue, a dignissim ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a interdum eros, vel sollicitudin erat. Vestibulum iaculis risus magna. Nunc.
</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">
3 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mattis augue, a dignissim ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a interdum eros, vel sollicitudin erat. Vestibulum iaculis risus magna. Nunc.
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
Section 4
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
4 -Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas et mattis augue, a dignissim ipsum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam a interdum eros, vel sollicitudin erat. Vestibulum iaculis risus magna. Nunc.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

a:hover, a:focus{
outline: none;
text-decoration: none;
}
.panel{
border:none;
border-radius:0;
}
#accordion .panel-heading{
background:#e74c3c;
color:#fff;
border:none;
border-radius:0;
padding:0;
}
#accordion .panel-body{
background:#e74c3c;
color:#fff;
border:none;
}
.panel-group .panel + .panel {
margin-top:0;
}
#accordion a{
display: block;
padding:20px 31px;
border-bottom:1px solid #ef6f61;
text-align:center;
}