<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='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700' rel='stylesheet' type='text/css'> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <div class="col-md-6 col-md-offset-3"> <div class="panel panel1"> <div class="panel-heading panel-heading2"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#" href="#one"> <b>Order Id :</b>46464 <br/> <b>Order Name :</b>Saree Name <span class="pull-right"><b>Status :</b> New </span> </a> </h4> </div> <div id="one" class="panel-collapse collapse"> <div class="panel-body"> Where now are the horse and the rider? Where is the horn that was blowing? Where is the helm and the hauberk, and the bright hair flowing? </div> </div> </div> <!-- end of panel --> </div> <div class="col-md-6 col-md-offset-3"> <div class="panel panel1"> <div class="panel-heading panel-heading2"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#" href="#one"> <b>Order Id :</b>46464 <br/> <b>Order Name :</b>Saree Name <span class="pull-right"><b>Status :</b> New </span> </a> </h4> </div> <div id="one" class="panel-collapse collapse"> <div class="panel-body"> Where now are the horse and the rider? Where is the horn that was blowing? Where is the helm and the hauberk, and the bright hair flowing? </div> </div> </div> <!-- end of panel --> </div>

.panel { border-width: 0 0 1px 0; border-style: solid; border-color: #fff; background: none; box-shadow: none; } .panel1:last-child { border-bottom: none; } .panel-group1 > .panel1:first-child .panel-heading { border-radius: 4px 4px 0 0; } .panel-group .panel { border-radius: 0; } .panel-group .panel + .panel { margin-top: 0; } .panel-heading2 { background-color: #8ED058; background-image: -webkit-gradient(linear, left top, left bottom, from(#8ED058), to(#7BB64B)); border-radius: 0; border: none; color: #fff; padding: 0; } .panel-title a { display: block; color: #fff; padding: 15px; position: relative; font-size: 16px; font-weight: 400; } .panel-title a:hover{text-decoration:none;} .panel-title a:focus{text-decoration:none;} .panel-body { background: #fff; box-shadow:0 0 2px #000; } .panel:last-child .panel-body { border-radius: 0 0 4px 4px; } .panel:last-child .panel-heading { border-radius: 0 0 4px 4px; transition: border-radius 0.3s linear 0.2s; } .panel:last-child .panel-heading.active { border-radius: 0; transition: border-radius linear 0s; } /* #bs-collapse icon scale option */ .panel-heading.active a:before { content: ' '; transition: all 0.5s; transform: scale(0); } #bs-collapse .panel-heading a:after { content: ' '; font-size: 24px; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; transform: scale(0); transition: all 0.5s; } #bs-collapse .panel-heading.active a:after { content: '\e909'; transform: scale(1); transition: all 0.5s; } /* #accordion rotate icon option */ #accordion .panel-heading a:before { content: '\e316'; font-size: 24px; position: absolute; font-family: 'Material Icons'; right: 5px; top: 10px; transform: rotate(180deg); transition: all 0.5s; } #accordion .panel-heading.active a:before { transform: rotate(0deg); transition: all 0.5s; }

$(document).ready(function() { $('.collapse.in').prev('.panel-heading2').addClass('active'); $('#accordion, #bs-collapse') .on('show.bs.collapse', function(a) { $(a.target).prev('.panel-heading2').addClass('active'); }) .on('hide.bs.collapse', function(a) { $(a.target).prev('.panel-heading2').removeClass('active'); }); });