<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <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="" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion 1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> <div class="panel-body"> Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. </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"> Accordion 2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> <div class="panel-body"> Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. </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"> Accordion 3 </a> </h4> </div> <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree"> <div class="panel-body"> Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. Это текст для демонстрации секций аккордиона. </div> </div> </div> </div><!--./panel-group--> </div> </div> </div>

a:hover, a:focus{ outline: none; text-decoration: none; } #accordion .panel{ border:0px none; box-shadow:none; } #accordion .panel-heading{ padding:0; background: #fff; } #accordion .panel-title a{ display: block; position: relative; background:transparent; color:#de4d4e; font-size:14px; font-weight: bolder; text-transform:uppercase; margin-bottom:15px; padding:15px 20px; border-bottom:1px solid #de4d4e; border-radius: 0 15px 0 15px; transition:all 0.10s linear 0s; } #accordion .panel-title a.collapsed{ color:#808080; border-bottom:1px solid #d3d3d3; margin: 0; } #accordion .panel-title a i{ color:#de4d4e; position: absolute; top: 14px; left:25px; } #accordion .panel-title a:before, #accordion .panel-title a.collapsed:before{ content:""; position: absolute; bottom:-15px; left:36px; border:7px solid transparent; border-top:7px solid #de4d4e; } #accordion .panel-title a.collapsed:before{ content:""; border: 0px none; } #accordion .panel-title a.collapsed:hover{ color: #6a6060; } #accordion .panel-title a:after, #accordion .panel-title a.collapsed:after{ content: "\f106"; font-family: FontAwesome; color: #de4d4e; font-size: 20px; line-height: 20px; position: absolute; top: 14px; right:25px; } #accordion .panel-title a.collapsed:after{ content: "\f107"; color:#808080; } #accordion .panel-body{ border-top:0 none; color:#808080;