Bootstrap Accordion — стиль 15

Подробное описание и демонстрация работы аккордеона под номером №15 для библиотеки 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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
<i class="fa fa-envelope-o"></i>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. Suspendisse euismod in mi quis dapibus. Sed eros orci, ultrices et lacus rhoncus, ultrices suscipit libero. Nunc laoreet, ligula mattis imperdiet convallis, sapien nisi auctor dui, nec scelerisque nulla massa et magna.
</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">
<i class="fa fa-comment-o"></i>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 euismod in mi quis dapibus. Sed eros orci, ultrices et lacus rhoncus, ultrices suscipit libero. Nunc laoreet, ligula mattis imperdiet convallis, sapien nisi auctor dui, nec scelerisque nulla massa et magna.
</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="true" aria-controls="collapseThree">
<i class="fa fa-life-ring"></i>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 euismod in mi quis dapibus. Sed eros orci, ultrices et lacus rhoncus, ultrices suscipit libero. Nunc laoreet, ligula mattis imperdiet convallis, sapien nisi auctor dui, nec scelerisque nulla massa et magna.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

a:hover, a:focus{
outline: none;
text-decoration: none;
}
#accordion  .panel{
margin-bottom:12px;
}
#accordion .panel-heading{
background:#fff;
border-radius:0;
padding:0;
}
#accordion .panel-title a{
position: relative;
color:#3498db;
display: block;
padding:20px 20px 20px 70px;
text-transform:uppercase;
border:5px solid #c0c0c0;
font-weight:bold;
line-height: 22px;
}
#accordion  .panel-title a i{
width: 60px;
height: 60px;
background: #fff;
border: 5px solid #c0c0c0;
font-size: 20px;
position: absolute;
top: -13px;
left: -14px;
line-height: 47px;
text-align: center;
}
#accordion .panel-title a:hover,
#accordion .panel-title a:hover i{
border-color: #3498db;
}
#accordion .panel-title > a.collapsed{
color:#3e3e3e;
}
.panel-body{
border:5px solid #c0c0c0;
}