Bootstrap Accordion — стиль 10

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

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

Это текст специально написан для демонстрации работы эффекта. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
Это текст специально написан для демонстрации работы эффекта. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
Это текст специально написан для демонстрации работы эффекта. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
html разметка для реализации аккордеона

<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">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
</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. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
</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. Integer hendrerit viverra egestas. Morbi quam lectus, commodo ac lacus eget, finibus aliquet metus. Pellentesque blandit nunc non sagittis consectetur. In accumsan eget enim eget porta. Etiam gravida non leo vel placerat.
</div>
</div>
</div>
</div>
</div>
</div>
</div>

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

a:hover, a:focus{
outline: none;
text-decoration:none;
}
#accordion .panel-heading{
background:none;
padding:0;
}
.panel-title{
position: relative;
}
.panel-title > a{
color: #3498db;
font-size: 16px;
padding: 9px 20px 9px 40px;
border: 1px solid #f1efef;
display: block;
line-height: 21px;
}
.panel-title > a.collapsed{
color: #9F9D9D;
}
.panel-title > a:before,
.panel-title > a.collapsed:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "f068";
padding-right: 10px;
position: absolute;
left: 15px;
}
.panel-title > a.collapsed:before{
content: "f067";
}
#accordion .panel-body{
color: #828282;
font-size: 14px;
line-height: 26px;
}



Теги:
0

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

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