<style>
.glslide{
  position: fixed;
  bottom:37px;
  z-index: 98899;    
  background: #00305d;
  width: 450px; 
  right: -450px;
  height: 650px;
  padding: 10px 10px;    
  transition: right 0.4s ease-in-out;
  -o-transition: right 0.4s ease-in-out;
  -ms-transition: right 0.4s ease-in-out;
  -moz-transition: right 0.4s ease-in-out;
  -webkit-transition: right 0.4s ease-in-out;
}
.gltoggle{
  position: absolute;
  bottom: 80px;
  width: 65px;
  height: 32px;
  right: 435px;
  padding: 6px;
  background: #ff0000;
  border-color: #ff0000;
  font-size: 15px;
  text-align: center;
  vertical-align: middle;    
  color: #fff;
  cursor: pointer;    
}

.condetails {
  max-height: 580px;
  overflow-y: auto;        
}    
    
.glbox {
  padding: 10px;
  background: #00305d;
  border-color: #00305d;    
}
.glslide-open{
  right: 0px;
}
</style>
<div class="glslide" id="glslide">
<div class="gltoggle rotate" id="glbox">Product</div>
<div class="row">
<div class="col-md-2"></div>
<div class="col-md-8">
<br><br><br><br>
<div class="form-group">
<div class="input-group">    
<input type="text" class="form-control form-control-lg" id="gltextsearch" placeholder="Search by Name, Model, Code" autocomplete="off">
<span class="input-group-addon"><a id="glprosearch" style="cursor: pointer;"><span class="fa fa-search"></span></a></span>    
</div>
</div>
</div>    
</div>
<div id="glseardet" class="condetails style-2">
<div class="col-md-12">
<table class="table  table-striped table-bordered">
<thead style="text-transform: uppercase;background-color: #eee">
<tr>
<th width='30'>No</th>
<th width="100" >SKU</th>
<th>Name</th>
<th>Quantity</th>
<th width="80">Details</th>
</tr>
</thead>
<tbody id="prodetails">

</tbody>
</table>
</div>    
</div>    
</div>
<script type="text/javascript">    
function pdr_details(id,obj) {
$('.details_tr').remove();
$.ajax({
type: "POST",
url: "axe_prodet.php",
cache: false,
data: {pdetails: 1, 'id': id},
timeout: 15000,
success: function (data){
var html='<tr class="details_tr " style="background: #ddd;display:none"><td colspan="5"><p class="text-right" style="color: #337ab7;text-decoration: none;padding-r: 10px;padding-right: 16px;cursor: pointer;"><a onclick="close_window(this)"><i class="fa fa-close"></i> Close</a></p>'+data+'</td></tr>';
$(html).insertAfter($(obj).closest('tr'));
$('.details_tr').fadeIn('slow');
},
error: function (jqXHR, textStatus, errorThrown) {
}
});

}
function close_window(obj){
$('.details_tr').fadeOut('slow');
$(obj).closest('tr').remove();
}
</script>