Dropdowns / Accordions 3

<meta charset="UTF-8">

<title>Testimonial</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<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 class="first" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

Heading-one

<span> </span>

</a>

</h4>

</div>

<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">

<div class="panel-body">

<p>Lorem , 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 vehic</p>

</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">

Heading-Two

<span> </span>

</a>

</h4>

</div>

<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">

<div class="panel-body">

<p>Pellentesque justo turpis, blandit nec ex eu, tempus placerat diam. Morbi a felis commodo eros consectetur rhoncus sed eget lectus, posuere massa id, ultricies est. Pellentesque sit amet venenatis est, quis posuere ipsum.</p>

</div>

</div>

</div>

<div class="panel panel-default">

<div class="panel-heading" role="tab" id="headingThree">

<h4 class="panel-title">

<a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">

Heading-Three

<span> </span>

</a>

</h4>

</div>

<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">

<div class="panel-body">

<p>Nulla vitae ipsum diam. Pellentesque vitae metus vitae massa egestas posuere 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.</p>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<style>

.body {

margin-top: 50px !important;

}

a:hover, a:focus{

text-decoration: none !important;

outline: none !important;

}

.panel-group .panel{

background-color: #fff;

border:none;

box-shadow:none;

border-radius: 10px;

margin-bottom:11px;

}

.panel .panel-heading{

padding: 0;

border-radius:10px;

border: none;

}

.panel-heading a{

color:#fff !important;

display: block;

border:none;

padding:20px 35px 20px;

font-size: 20px;

background-color:rgb(236, 87, 102);

font-weight:600;

position: relative;

color:#fff;

box-shadow:none;

transition:all 0.1s ease 0;

}

.panel-heading a:after, .panel-heading a.collapsed:after{

content: "\f068";

font-family: fontawesome;

text-align: center;

position: absolute;

left:-20px;

top: 10px;

color:#fff;

background-color:rgb(236, 87, 102);

border: 5px solid #fff;

font-size: 15px;

width: 40px;

height:40px;

line-height: 30px;

border-radius: 50%;

transition:all 0.3s ease 0s;

}

.panel-heading:hover a:after,

.panel-heading:hover a.collapsed:after{

transform:rotate(360deg);

}

.panel-heading a.collapsed:after{

content: "\f067";

}

#accordion .panel-body{

background-color:#Fff;

color:#8C8C8C;

line-height: 25px;

padding: 10px 25px 20px 35px ;

border-top:none;

font-size:14px;

position: relative;

}

</style>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script><script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>