Bootstrap Accordion — стиль 1

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

Демо Аккордиона — стиль 1

Это текст специально написан для демонстрации работы эффекта. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
Это текст специально написан для демонстрации работы эффекта. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
Это текст специально написан для демонстрации работы эффекта. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
html разметка для реализации аккордеона

<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 role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<span class="left-icon"><i class="fa fa-globe"></i></span>
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. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</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">
<span class="left-icon"><i class="fa fa-rocket"></i></span>
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. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</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">
<span class="left-icon"><i class="fa fa-user-md"></i></span>
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. Quisque posuere augue porta turpis ornare, nec commodo dui pellentesque. Sed at metus hendrerit, varius nisl et, iaculis ex. Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere. Mauris ultricies vehicula tempor. Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus. Praesent non erat vehicula, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

css разметка для реализации аккордеона

.panel-group .panel{
border-radius: 0px;
border:0px none;
box-shadow: none;
}
.panel-heading{
padding: 0;
}
.panel-title{
position: relative;
}
.panel-title > a{
border:1px solid #dc005a;
display: block;
background: #dc005a;
color:#fff;
padding: 0 45px 0 0;
}
.panel-title > a:hover,a:focus{
text-decoration: none;
outline: none;
}
.panel-title .left-icon{
border-right:1px solid #fff;
font-size: 24px;
color:#fff;
width: 40px;
padding: 13px 0;
text-align: center;
display: inline-block;
margin-right: 10px;
}
.panel-title a:after{
content: "f068";
font-family: "Font Awesome 5 Free";
font-weight: 900;
float: right;
font-size: 20px;
margin-right: 20px;
color:#fff;
position: absolute;
top:15px;
right:0;
display: inline-block;
}
.panel-title .collapsed:after{
content: "f067";
color:#dc005a;
}
.panel-title .collapsed{
background: #fff;
color:#6d6d6d;
border-color:lightgray;
}
.panel-title .collapsed .left-icon{
color:#dc005a;
border-color:lightgray;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body{
border-top:0px none;
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *