<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 ----------> <div class="container"> <div class="row productdetail"> <div class="col-md-9 col-sm-9 col-md-push-3 col-sm-push-3"> Product Detail section </div> <div class="col-md-3 col-sm-3 col-md-pull-9 col-sm-pull-9"> <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="retailer"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Item list -1 </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="retailer"> <ul> <li class="active"><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> </ul> </div> </div> <div class="panel panel-default"> <div class="panel-heading" role="tab" id="ingredient"> <h4 class="panel-title"> <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Item list-2 </a> </h4> </div> <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="ingredient"> <ul> <li><a class="active" href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> <li><a href="#" title="">Product item</a></li> </ul> </div> </div> </div> </div> <div class="clearfix"></div> </div> </div>

.productdetail .panel-group .panel-default{ border-color: #a8cf38; border-radius: 0; } .productdetail .panel-group .panel-default .panel-heading{ background-color: #a8cf38; color: #fff; } .productdetail .panel-group .panel-default h4{ font-family: 'Roboto', sans-serif; font-size: 16px;s } .productdetail .panel .panel-collapse ul{ list-style: none; padding: 0; margin: 0; } .productdetail .panel .panel-collapse ul li{ display: block; padding: 5px 10px; border:1px solid #a8cf38; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } @import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"); .panel-title > a:before { float: right !important; font-family: FontAwesome; content:"\f068"; padding-right: 5px; } .panel-title > a.collapsed:before { float: right !important; content:"\f067"; } .panel-title > a:hover, .panel-title > a:active, .panel-title > a:focus { text-decoration:none; color: #c01d2e; } .productdetail .panel ul li:hover, .productdetail .panel ul li.active { border-left: 8px solid #a8cf38; -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; }